Outlays and Revenues for 2018-2020 w/ Drilldown

by adkf37

HTML

<script src="https://github.highcharts.com/highcharts.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>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Outlays and Revenues for 2018-2020 (in billions of dollars)'
  },
  subtitle: {
    text: 'Click columns to drill down to single series. Click categories to drill down both.'
  },
  xAxis: {
    type: 'category'
  },

  plotOptions: {
    series: {
      borderWidth: 0,
      showCheckbox: true,
      events: {
        legendItemClick: function() {
          return false;
        },
        checkboxClick: function(event) {
          if (event.checked) {
            this.show();
            this.legendSymbol.show();
          } else {
            this.hide();
            this.legendSymbol.show();
          }
        }
      },
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: '2018',
    selected: true,
    data: [{
      name: 'Outlays',
      y: 4142,
      drilldown: 'Outlays-2018'
    }, {
      name: 'Revenues',
      y: 3338,
      drilldown: 'Revenues-2018'
    }, ]
  }, {
    name: '2023',
    selected: true,
    data: [{
      name: 'Outlays',
      y: 5500,
      drilldown: 'Outlays-2019'
    }, {
      name: 'Revenues',
      y: 4228,
      drilldown: 'Revenues-2019'
    }]
    },{
    name: '2028',
    selected: true,
    data: [{
      name: 'Outlays',
      y: 7046,
      drilldown: 'Outlays-2020'
    }, {
      name: 'Revenues',
      y: 5520,
      drilldown: 'Revenues-2020'
     },]
     }],
  drilldown: { allowPointDrilldown: false,
    series: [{name: '2018',
      id: 'Outlays-2018',
      selected: true,
      data: [
        ['Mandatory', 2546],
        ['Discretionary',1245 ],
        ['Net Interest', 316]  
      ]
    }, {name: '2019',
      id: 'Outlays-2019',
      selected: true,
      data: [
         ['Mandatory', 2646],
        ['Discretionary',1345 ],
        ['Net Interest', 366]  
      ]
    }, {name: '2020',
      id: 'Outlays-2020',
      selected: true,
      data: [
        ...