Highcharts Demo

author(s): Torstein Hønsi

by sridhar reddy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display:none">4/13/2018,16564
4/18/2018,16239
4/25/2018,14127
5/2/2018,14967
5/9/2018,15499</pre>

JavaScript

Highcharts.chart('container', { 
    "chart": {
            "type": "line",
            "height": 300,
            "width": 600,
            "zoomType": "x",
            "backgroundColor": "transparent",
            "spacingBottom": 0,
            "spacingRight": 10,
            "spacingLeft": 2
        },
        "credits": {
            "enabled": false
        },
        "boost": {
            "enabled": true,
            "allowForce": true,
            "seriesThreshold": 21,
            "usePreallocated": true
        },
        "plotOptions": {
            "series": {
                "animation": false,
                "states": {
                    "hover": {
                        "enabled": true,
                        "lineWidthPlus": 0
                    }
                },
                "boostThreshold": 2880,
                "marker": {
                    "enabled": true,
                    "radius": 0,
                    "states": {
                        "hover": {
                            "enabled": true,
                            "radius": 4,
                            "radiusPlus": 0,
                            "fillColor": "#FFFFFF",
                            "lineWidth": 1
                        }
                    }
                },
                "events": {},
                "enableMouseTracking": false
            },
            "area": {
                "showInLegend": true,
                "lineWidth": 0,
                "linkedTo": ":previous",
                "color": "#aacfff",
                "fillOpacity": 0.3,
                "zIndex": 1,
                "marker": {
                    "enabled": true,
                    "radius": 2,
                    "symbol": "circle"
                },
                "states": {
                    "hover": {
                        "enabled": true
                    }
                }
            },
            "arearange": {
                "showInLegend": true,
...