Styled mode column

author(s): Torstein Hønsi

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


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

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'column',
    height: 700
  },
  credits: {
    enabled: false,
  },
  title: {
    text: '',
  },

  subtitle: {
    text: '',
    align: 'left'
  },

  xAxis: {
    categories: [
      'M243-SYNTURF-0043', 'M072-SYNTURF-0018', 'M039-SYNTURF-0012', 'M107-SYNTURF-0024', 'M107-SYNTURF-0025', 'M286-SYNTURF-0045', 'M098-SYNTURF-0019', 'M010-SYNTURF-0002', 'M010-SYNTURF-0003', 'M010-SYNTURF-0004', 'M063-SYNTURF-0014', 'M104-SYNTURF-0043', 'M107-SYNTURF-0026',
    ]
  },

  yAxis: [{ // Primary axis
    className: 'highcharts-color-0',
    title: {
      text: 'Net Benefit'
    },
     labels: {
      formatter: function() {
        return this.value.toFixed(1);
      }
    }
  }, { // Secondary axis
    className: 'highcharts-color-1',
    opposite: true,
    title: {
      text: 'Cost/Benefit'
    },
    tickInterval: 2000000,
    labels: {
        formatter: function() {
        return '$' + this.value / 1000000 + 'M';
      }
    },
  }],

  plotOptions: {
    column: {
      borderRadius: 3
    }
  },

  series: [{
    name: 'Net Benefit',
    data: [1.9, 2.5, 1.1, 0.7, 0.4, 3.1, 0.3, 0.6, 0.2, 0.5, 0.6, 0.2, 0.1],
  }, {
    name: 'Cost/Benefit',
    data: [
      2000000, 500000, 2000000, 3000000, 2000000, 200000, 200000, 300000, 5000000, 500000, 100000, 12000000, 30000000
    ],
    yAxis: 1,
    tooltip: {
      valuePrefix: '$'
    }
  }]

});