Dynamically updated data

author(s): Torstein Hønsi

by Naveen Ravichandran

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
    height: 90px;
    min-width: 310px;
}

JavaScript

// Create the chart
Highcharts.stockChart('container', {
    "boost": {
        "useGPUTranslations": true
    },
    "chart": {
        "type": "bar",
        "className": "",
        "backgroundColor": "transparent",
        "renderTo": {},
        "animation": false,
        "events": {}
    },
    "title": {
        "text": ""
    },
    "credits": {
        "enabled": false,
        "text": "Please visit xViz.com for licensing.",
        "href": "",
        "style": {
            "color": "#999999",
            "fontSize": "10px"
        }
    },
    "xAxis": {
        "crosshair": true,
        "opposite": false,
        "lineColor": "#ccd6eb",
        "lineWidth": 2,
        "labels": {
            "useHTML": true,
            "enabled": true,
            "step": 1,
            "style": {
                "color": "#777777",
                "fontSize": "12px",
                "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif"
            },
            "rotation": 0,
            "allowOverlap": false,
            "events": {}
        },
        "title": {
            "text": "",
            "style": {
                "color": "#777777",
                "fontSize": 12,
                "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif"
            }
        },
        "visible": true,
        "reversed": true,
        "scrollbar": {
            "zIndex": 20,
            "enabled": false,
            "showFull": false,
            "height": 7,
            "buttonArrowColor": "#b7b7b7",
            "rifleColor": "#cccccc",
            "buttonBorderRadius": 2
        },
        "categories": [
            "Technology",
            "Furniture",
            "Office Supplies"
        ],
        "max": 2,
        "min": 0,
        "plotLines": [],
        "plotBands": []
    },
    "yAxis": [
        {
            "gridLineColor": "#26b0d2",
            "gridLineDashStyle": "solid",
            "gridLineWidth":...