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>

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

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'boxplot',
    events: {
      load: function() {
        var chart = this;

        chart.series[0].points[2].update({
          color: 'red'
        })

        chart.series[0].addPoint({
          low: 600,
          q1: 700,
          median: 800,
          q3: 900,
          high: 1000,
          color: "green"
        })

      }
    }
  },

  plotOptions: {
    boxplot: {
      fillColor: '#F0F0E0',
      lineWidth: 2,
      medianColor: '#0C5DA5',
      medianWidth: 3,
      stemColor: '#A63400',
      stemDashStyle: 'dot',
      stemWidth: 1,
      whiskerColor: '#3D9200',
      whiskerLength: '20%',
      whiskerWidth: 3,
      color: 'black'
    }
  },

  series: [{
    data: [
      [760, 801, 848, 895, 965],
      [733, 853, 939, 980, 1080],
      [714, 762, 817, 870, 918],
      [724, 802, 806, 871, 950],
      [834, 836, 864, 882, 910]
    ]
  }]

});