Highcharts Demo

author(s): Torstein Hønsi

by ryannaumanx

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>

CSS

/* .highcharts-tracker-line {
  stroke: black !important;
} */

JavaScript

Highcharts.chart('container', {
    "accessibility": {
        "enabled": false
    },
    "credits": {
        "enabled": false
    },
    "title": {
        "text": "fruits",
        "margin": 50,
    },
    "tooltip": {
        "split": true,
        "outside": true
    },
    "boost": {
        "useGPUTranslations": false,
        "seriesThreshold": 1,
        "enabled": true
    },
    "chart": {
        "spacingRight": 15,
        "spacingLeft": 5,
        "marginTop": 60,
        "width": 200,
        "zooming": {
            "mouseWheel": {
                "enabled": true
            },
            "type": "y"
        },
        "marginBottom": 100,
        "events": {}
    },
    "legend": {
        "width": 200,
        "maxHeight": 100,
        "x": 15,
    },
    "xAxis": {
        "minorTicks": true,
        "crosshair": {
            "snap": false
        },
        "maxPadding": 0,
        "minPadding": 0,
        "title": {
            "offset": 7,
            "style": {
                "fontSize": "11px"
            }
        },
        "labels": {
            "y": -7,
        },
        "tickLength": 0,
        "endOnTick": true,
        "lineWidth": 0,
        "startOnTick": true,
        "tickAmount": 2,
        "minorTickInterval": "auto",
        "tickPositions": [
            0,
            150
        ],
        "min": 0,
        "max": 150,
        "reversed": false,
        "opposite": true,
        "gridLineWidth": 0,
        "minRange": 0.1,
        "type": "linear"
    },
    "yAxis": {
        "min": 1067.62296,
        "max": 1097.18856,
        "minorTicks": true,
        "reversed": true,
        "crosshair": {
            "snap": false
        },
        "title": {
            "text": null
        },
        "maxPadding": 0,
        "minPadding": 0,
        "events": {},
        "labels": {
            "padding": 0,
            "rotation": -90,
            "format": "{value}",
        },
        "plotLines": []
    },
   ...