Outlay and Revenues Drilldown #1

by adkf37

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(function() {

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Outlays and Revenues for 2018 (in billions of dollars)'
    },
    xAxis: {
      type: 'category'
    },

    legend: {
      enabled: false
    },

    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true,
        }
      }
    },

    series: [{
      name: 'Outlays vs Revenues',
      colorByPoint: true,
      data: [{
          name: 'Outlays',
          color: '#5d9db5',
          y: 4107,
          drilldown: 'Outlays'
        },
        {
          name: 'Revenues',
          color: '#6aa069',
          y: 3338,
          drilldown: 'Revenues'
        }
      ]
    }],
    drilldown: {
      series: [{
          type: 'pie',
          id: 'Outlays',
          name: 'Outlays',
          data: [{
              name: 'Discretionary',
              color: '#003e53',
              y: 1245,
              drilldown: 'Discretionary'
            },
            {
              name: 'Mandatory',
              color: '#002235',
              y: 2546,
              drilldown: 'Mandatory'
            },
            {
              name: 'Net Interest',
              color: '#105c72',
              y: 316,
            }
          ]
        },
        {
          type: 'pie',
          id: 'Revenues',
          name: 'Revenues',
          data: [{
              name: 'Individual Income Taxes',
              color: '#002400',
              y: 1639,
            },
            {
              name: 'Payroll Taxes',
              color: '#054010',
              y: 1178,
            },
            {
              name: 'Corporate Income Taxes',
              color: '#2a5e2c',
              y: 243,
            },
            {
              name: 'Other',
              color: '#4a7e4a',
              y: 278,
            }
          ]
        },

        {
          type: 'pie',
          id:...