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/broken-axis.js"></script>

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'boxplot',
    "width": 165
  },

  title: {
    text: null
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: null
    }
  },

  yAxis: {
    title: {
      text: 'Observations'
    },
    endOnTick: false,
    breaks: [{
      from: 5,
      to: 600,
      breakSize: 0
    }, {
      from: 700,
      to: 800,
      breakSize: 0
    }, {
      from: 900,
      to: 9900,
      breakSize: 0
    }, {
      from: 10000,
      to: 10312,
      breakSize: 0
    }],
    tickPositions: [0, 700, 900, 10000],
    max: 10312
  },

  series: [{
    name: 'Observations',
    data: [
      [3, 836, 864, 882, 10312]
    ],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  }, {
    name: 'Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0, 644],
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
      pointFormat: 'Observation: {point.y}'
    }
  }]

});