Boxplot & Column

author(s): Torstein Hønsi

by Pranav Kulkarni

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" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

JavaScript

var colData = [
  [400, 300, 300],
  [378, 324, 280]
];
var dataSum = 0;
for (var j = 0; j < colData.length; j++) {
var col = colData[j];
  for (var k = 0; k < col.length; k++) {
    dataSum += col[k];
  }
  for (var k = 0; k < col.length; k++) {
    col[k].y = col[k];
    col[k].label = ((col[k].y / dataSum) * 100) + '%';
  }
}
Highcharts.chart('container', {

  chart: {

  },

  title: {
    text: 'Highcharts box plot styling'
  },

  legend: {
    enabled: false
  },

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

  yAxis: {
    title: {
      text: 'Observations'
    }
  },

  plotOptions: {
    column: {
      events: {
        afterAnimate: function() {
          for (var i = 0; i < this.data.length; i++) {
            this.chart.renderer.label(this.data[i].y, this.data[i].plotX + this.chart.plotLeft + this.pointXOffset, this.data[i].plotY + this.chart.plotTop)
              .attr({
                padding: 10,
                fill: 'rgba(0, 0, 0, 0.75)',
                zIndex: 6
              })
              .css({
                color: '#FFFFFF'
              })
              .add();
          }
        }
      }
    },
    boxplot: {
      lineWidth: 2,
      medianWidth: 3,
      stemWidth: 1,
      whiskerWidth: 3
    },
    series: {
      //pointWidth: 20,
      dataLabels: {
        inside: true,
        verticalAlign: 'bottom',
        borderRadius: 5,
        backgroundColor: 'rgba(252, 255, 197, 0.7)',
        //backgroundColor: 'rgba(158, 163, 116, 0.7)',
        borderWidth: 1,
        borderColor: '#AAA',
        style: {
          color: 'black',
          textOutline: "none"
        },
        enabled: true,
        formatter: function() {
          return this.point.label;
        }
      }
    },
  },

  series: [{
    type: 'column',
    name: 'Joe',
    data: colData[0]
  }, {
    type: 'column',
    name: 'Jane',
    data: colData[1]
  }, {
    type: 'boxplot',
    name:...