Highcharts Demo

author(s): Torstein Hønsi

by ashish shubham

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

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

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "boxplot",
    "renderTo": {},
    "zoomType": "",
    "panning": true,
    "plotBorderWidth": 0,
    "reflow": false
  },
  "legend": {
    "enabled": false
  },
  "navigator": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "zones": [
        {
          "value": 1543219200000
        },
        {
          "dashStyle": "ShortDot"
        }
      ],
      "dataLabels": {
        "enabled": false,
        "padding": 2,
        "borderRadius": 2,
        "style": {
          "fontSize": "12px"
        }
      },
      "connectNulls": true,
      "turboThreshold": 1000000,
      "events": {}
    },
    "line": {},
    "boxplot": {
      "medianWidth": 7,
      "pointWidth": 7,
      "stemWidth": 2,
      whiskerLength: '150%'
    }
  },
  "rangeSelector": {
    "enabled": false,
    "inputEnabled": false
  },
  "scrollbar": {
    "enabled": false
  },
  "series": [
    {
      "data": [
        {
          "x": 1410764400000,
          "y": 1017,
          "z": 36,
          "median": 1017,
          "q1": 1017,
          "q3": 1017,
          "low": 981,
          "high": 1053,
          "name": 1410764400000
        },
        {
          "x": 1424678400000,
          "y": 1050,
          "z": 37,
          "median": 1050,
          "q1": 1050,
          "q3": 1050,
          "low": 1013,
          "high": 1087,
          "name": 1424678400000
        },
        {
          "x": 1432537200000,
          "y": 1083,
          "z": 38,
          "median": 1083,
          "q1": 1083,
          "q3": 1083,
          "low": 1045,
          "high": 1121,
          "name": 1432537200000
        }
      ],
      "name": "Avg Scale Score",
      "blinkSeriesId": "9219c0cb-8699-40a8-8c50-4ed6e4c6cb96",
      "valueColumnIdentifier": "9219c0cb-8699-40a8-8c50-4ed6e4c6cb96",
      "visible": true,
      "color": "#525252",
      "pointRange": 604800000,
      "colsize": 604800000,
      "id": "Avg...