Highcharts Demo

author(s): Pawel Potaczek

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="outer-container">
    <div id="container"></div>
    <div id="buttons">
        <button id='y1800'>data set 1</button>
        <button id='y1900'>data set 2</button>
    </div>
</div>

CSS

#outer-container {
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

#buttons {
    font-size: 0;
}
#buttons button {
    font-size: 1rem;
    background: #efefef;
    border: 1px solid silver;
    margin-right: -1px;
}
#buttons button:first-child {
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
}
#buttons button:last-child {
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}
#buttons button:focus {
    outline: none;
    background: #dfdfdf;
}

JavaScript

function getYear1800() {
  return [
    ['Asia', 635],
    ['Europe', 203],
    ['Africa', 107],
    ['America', 31],
    ['Oceania', 2]
  ];
}

function getYear1900() {
  return [
    ['Asia', 947],
    ['Europe', 408],
    ['America', 156],
    ['Africa', 133],
    ['Oceania', 6]
  ];
}

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  xAxis: {
    type: 'category',
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    colorByPoint: true,
    dataSorting: {
      enabled: true,
      matchByName: true
    },
    dataLabels: {
      enabled: true
    },
    name: 'Year 1800',
    data: getYear1800()
  }, {
    colorByPoint: true,
    dataSorting: {
      enabled: true,
      matchByName: true
    },
    dataLabels: {
      enabled: true
    },
    name: 'Year 1900',
    data: getYear1900()
  }]
});

document.getElementById('y1800').addEventListener('click', function() {
  chart.series[0].update({
    name: 'Year 1800',
    data: getYear1800()
  });
  chart.series[1].update({
    name: 'Year 1800',
    data: getYear1900()
  });
});

document.getElementById('y1900').addEventListener('click', function() {
  chart.series[0].update({
    name: 'Year 1900',
    data: getYear1900()
  });

  chart.series[1].update({
    name: 'Year...