Stacked bar

author(s): Torstein Hønsi

by Black Label

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/pattern-fill.js"></script>

<div id="container1"></div>

<div id="container2"></div>

JavaScript

Highcharts.chart('container1', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    color: {
      pattern: {
        path: {
          d: 'M-1 1 l2 -2 M0 16 l16 -16 M15 17 l8 -8',
          strokeWidth: 2
        },
        color: '#f0f0f0',
        width: 16,
        height: 16
      }
    },
    dashStyle: 'dash',
    borderWidth: 2,
    borderColor: '#cbcbcb'
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    color: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 1
      },
      stops: [
        [0, 'rgb(255, 255, 255)'],
        [1, 'rgb(200, 200, 255)']
      ]

    },
  }]
});


Highcharts.chart('container2', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked bar chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    color: {
      pattern: {
        path: {
          d: 'M-1 1 l2 -2 M0 16 l16 -16 M15 17 l8 -8',
          strokeWidth: 2
        },
        color: '#f0f0f0',
        width: 16,
        height: 16
      }
    },
    dashStyle: 'dash',
    borderWidth: 2,
    borderColor: '#cbcbcb'
  }, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    color: {
      linearGradient: {
        x1: 1,
        y1: 1,
        x2: 0,
        y2: 0
      },
      stops: [
...