Highcharts Demo

author(s): Torstein Hønsi

by Danielle Parkinson

HTML

<script src="https://code.highcharts.com/highcharts.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="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column trend chart (for normal column charts)'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'etc'],
  },
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: ' '
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: ( // theme
          Highcharts.defaultOptions.title.style &&
          Highcharts.defaultOptions.title.style.color
        ) || 'gray'
      }
    }
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true
      }
    }
  },
  colors: [
    '#30aa64',
    '#ffc711',
    '#e72829',
    '#333F48'
  ],
  series: [{
        name: 'Rewards is better',
        data: [10, 11, 13, 16, 19]
    }, {
        name: 'Same as Rewards',
        data: [32, 34, 34, 33, 27]
    }, {
        name: 'Rewards is worse',
        data: [44, 41, 38, 35, 34]
    },
    {
        name: 'Dont know',
        data: [14, 14, 15, 16, 20]
    }]
});