Back

Candlestick and area chart

JavaScript candlestick chart with area series in the background. Secondary 'valueAxis' enabled. Conditional formatting enabled under 'style' to use different colors for increasing/decreasing values.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
chart= new TimeChart({
    "series": [
        {
            "name": "low",
            "data": {
                "index": 2,
                "aggregation": "min"
            },
            "style": {
                "fillColor": "#2fc32f3",
                "lineColor": "#2fc32f3"
            },
            "stack": "default",
            "type": "line"
        },
        {
            "name": "high",
            "data": {
                "index": 3,
                "aggregation": "max"
            },
            "style": {
                "fillColor": "#b0dc0b",
                "lineColor": "#b0dc0b"
            },
            "stack": "default",
            "type": "line"
        },
        {
            "name": "Apple Stock Price, $",
            "data": {
                "open": 1,
                "high": 2,
                "low": 3,
                "close": 4
            },
            "type": "candlestick",
            "valueAxis": "secondary",
            "style": {
                "increase": {
                    "bar": {
                        "lineColor": "#2fc32f"
                    },
                    "candlestick": {
                        "lineColor": "#2fc32f",
                        "fillColor": "#2fc32f"
                    }
                },
                "decrease": {
                    "bar": {
                        "lineColor": "#ec2e2e"
                    },
                    "candlestick": {
                        "lineColor": "#ec2e2e",
                        "fillColor": "#ec2e2e"
                    }
                }
            }
        }
    ],
    "stacks": {
        "default": {
            "type": "proportional"
        }
    },
    "valueAxis": {
        "secondary": {
            "enabled": true,
            "side": "right"
        }
    },
    "container": "demo",
    "data": [
        {
            "units": [
                "d"
            ],
            "url": "/dvsl/data/extra/appl.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
//Data too large to output
Download Data