Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

<button id="update" class="autocompare">update</button>

CSS

#container {
    min-width: 320px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

const chart = Highcharts.chart('container', {
        "title": {
            "text": "Top 10"
        },
        "subtitle": {
            "text": "Everything",
            "useHTML": true
        },
        "colors": [
            "#F5827A",
            "#FBB3AF"
        ],
        "chart": {
            "marginLeft": 60,
            "marginRight": 60,
            "spacingTop": 10,
            "spacingRight": 0,
            "spacingBottom": 8,
            "spacingLeft": 10,
            "zoomType": "",
            "alignTicks": false,
            "animation": true
        },
        "plotOptions": {
            "series": {
                "animation": true,
                "shadow": false,
                "borderWidth": 0,
                "marker": {
                    "enabled": true,
                    "states": {
                        "hover": {
                            "enabled": false
                        }
                    }
                }
            }
        },
        "legend": {
            "enabled": true
        },
        "series": [
            {
                "name": "Count",
                "type": "column",
                "data": [
                    4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9
                ]
            },
            {
                "name": "Cumulative Percent",
                "yAxis": 1,
                "type": "line",
                "data": [
                    18.18, 22.73, 27.27, 31.82, 36.36, 40.91, 45.45, 50, 54.55, 59.09, 100
                ]
            }
        ],
        "xAxis": {
            "type": "category",
            "title": {
                "text": "File",
                "enabled": false,
            },
            "categories": [
                "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "Other"
            ]
        },
        "yAxis": [
            {
                "min": 0,
                "max": 9,
                "lineWidth": 1,
                "allowDecimals": false,
      ...