Outlay Drilldown Pie #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 14px;
  font-size: 15px;
  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: 'pie'
    },
    title: {
      text: 'Discretionary vs Mandatory in 2018'
    },
    xAxis: {
      type: 'category'
    },

    legend: {
      enabled: false
    },

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

    series: [{
      name: 'Discretionary vs Mandatory',
      colorByPoint: true,
      data: [{
          name: 'Discretionary',
          y: 1245,
          drilldown: 'Discretionary'
        },
        {
          name: 'Mandatory',
          y: 2862,
          drilldown: 'Mandatory'
        }
      ]
    }],
    drilldown: {
      series: [{
        id: 'Discretionary',
        name: 'Discretionary',
        data: [{
            name: 'Nondefense',
            y: 647,
            drilldown: 'Nondefense'
          },
          ['Defense', 598]
        ]
      }, {
        id: 'Mandatory',
        name: 'Mandatory',
        data: [{
            name: 'Medicaid',
            y: 383,
            drilldown: 'Medicaid'
          },
          {
            name: 'Medicare',
            y: 707,
            drilldown: 'Medicare'
          },
          {
            name: 'Social Security',
            y: 984,
            drilldown: 'Social Security'
          },
          {
            name: 'Other Mandatory',
            y: 724,
            drilldown: 'Other Mandatory'
          },
          {
            name: 'Net Interest',
            y: 316,
            drilldown: 'Net Interest'
          },
          {
            name: 'Offsetting receipts',
            y: -252,
            drilldown: 'Offsetting receipts'
          }
        ],
      }, {
        id: 'Nondefense',
        name: 'Nondefense',
        data: [
          ['Administration of Justice', 56],
          ['Agriculture', 7],
          ['Commerce and Housing Credit', -4],
          ['Communtiy and Regional...