Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

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; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'Combine 2 series'
  },
  xAxis: {
    allowDecimals: false,
    tickInterval: 1,
    labels: {
      formatter: function() {
        return this.value; // clean, unformatted number for year
      }
    }
  },
  yAxis: {
    title: {
      text: 'Population'
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} - <b>{point.y:,.0f}</b>'
  },
  plotOptions: {
    area: {
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'Educated people',
    data: [{
      x: 0,
      y: 20000
    }, {
      x: 1,
      y: 19000
    }, {
      x: 2,
      y: 19000
    }, {
      x: 3,
      y: 18000
    }, {
      x: 4,
      y: 17000
    }, {
      x: 5,
      y: 16000
    }, {
      x: 6,
      y: 15000
    }, {
      x: 7,
      y: 14000
    }]
  }, {
    name: 'Uneducated people',
    data: [ {
      x: 8,
      y: 12000
    }, {
      x: 9,
      y: 11000
    }, {
      x: 10,
      y: 10000
    }]
  }]
});