Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://github.highcharts.com/modules/drilldown.js"></script>

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

JavaScript

$(function() {
  // Create the chart
  $('#container').highcharts({
chart: {
      type: 'column',
      events: {
        drilldown: function(e) {
          var chart = this,
            drilldowns = chart.userOptions.drilldown.series,
            series = [];
          e.preventDefault();
          Highcharts.each(drilldowns, function(p, i) {
            if (p.id.includes(e.point.name)) {
              chart.addSingleSeriesAsDrilldown(e.point, p);
            }
          });
          chart.applyDrilldown();
        }
      }
    },
    title: {
      text: 'Data Molasses'
    },
    subtitle: {
      text: 'Klik Bar Untuk Mengetahui Lebih Lengkap</a>.'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: [{
      title: {
        text: 'Total Data Per Bulan'
      },
      stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }

    },],
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        borderWidth: 0,
        dataLabels: {
          enabled: true,
          format: '{point.y:1f}',
        }
      }
    },

      tooltip: {
      headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f} TON</b> of total<br/>'
    },

    series: [{
      name: 'Month',
      colorByPoint: true,
      data: [{
        name: 'January',
        y: 56.33,
        drilldown: 'January'
      }, {
        name: 'Febuary',
        y: 24.03,
        drilldown: 'Febuary'
      }]
    }],
    drilldown: {
      series: [{
 ...