Highcharts Demo

author(s): Torstein Hønsi

by Black Label

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": {
    "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,
      "title": {
        "text": "Count",
        "rotation": 270,
        "style": {
          "fontWeight": "bold"
        }
      },
      "labels": {
        "enabled": true
      },
      "startOnTick": false,
      "endOnTick": false
    },
    {
      "min": 0,
      "max": 100,
      "gridLineWidth": 0,
      "lineWidth": 1,
      "opposite": true,
      "title": {
        "text": "Cumulative Percent",
        "rotation": 270,
        "style": {
          "fontWeight": "bold"
        }
      },
      "labels": {
        "enabled": true,
      }
    }
  ],
});

document.getElementById('update').addEventListener('click', () => {
  chart.update({
    "title":...