Air composition (stacked bar)

author(s): Mustapha Mekhatria

by mustapha mekhatria

HTML

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

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Composition of Air'
  },
  xAxis: {
    categories: ['Air']
  },
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: null,
    },
    labels:{
    format:'{value}%'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  tooltip: {
    formatter: function() {
      debugger;
      return 'The percentage of <b>' + this.series.name + '</b> in the air is <b>' + this.y + '%</b>';
    }
  },
  series: [{
    name: 'Other gases',
    color: '#FAA74B',
    data: [1.1]
  }, {
    name: 'Oxygen',
    color: '#71BF45',
    data: [20.9]
  }, {
    name: 'Nitrogen',
    color: '#01BAF2',
    data: [78]
  }]
});