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'
  },
  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: 'Sainsburys Nectar',
        data: [74, 71, 63, 76, 79]
    }, {
        name: 'Tesco Clubcard',
        data: [71, 73, 74, 73, 72]
    }, {
        name: 'Boots Advantage',
        data: [63, 61, 68, 65, 62]
    },
    {
        name: 'M&S Sparks',
        data: [37, 34, 35, 36, 32]
    }, {
        name: 'Waitrose',
        data: [10, 11, 13, 16, 19]
    }, {
        name: 'British Airways',
        data: [32, 34, 34, 33, 27]
    }, {
        name: 'O2',
        data: [44, 41, 38, 35, 34]
    },
    {
        name: 'None',
        data: [14, 14, 15, 16, 20]
    }]
});