Outlay and Revenues Drilldown w/ Time Series #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: 'line'
    },
    title: {
      text: 'Outlays and Revenues for 2018 (in billions of dollars)'
    },
    xAxis: {
      categories: ["2018","2019","2020"]
    },

    legend: {
      enabled: true
    },

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

    series: [{
      name: 'Outlays',
      data: [4200,4300,4400]},
      {
      name:'Revenues',
      data:[3338, 3500, 3600],
          drilldown: 'Revenues'
        }
         ],
    drilldown: {
      series: [{
          type: 'column',
          id: 'Outlays',
          name: 'Outlays',
          data: [{
              name: 'Mandatory',
               color: '#002235',
               y: 2546,
              drilldown: 'Mandatory'
            },{
              name: 'Discretionary',
               color: '#003e53',
               y: 1245,
              drilldown: 'Discretionary'
            },
                        {
              name: 'Net Interest',
              color: '#105c72',
             y: 316,
            }
          ]
        },
        {
          type: 'column',
          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: 'Discretionary',
          name: 'Discretionary',
          data: [{
              name: 'Nondefense',
              y: 647,
             ...