Highcharts Demo

author(s): Torstein Hønsi

by adkf37

HTML

<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/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'
    },
    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: 'Nondefense',
        data: [{
            name: "Administration of Justice",
            y: 56
          },
          {
            name: "Agriculture",
            y: 7
          },
          {
            name: "Commerce and Housing Credit",
            y: -4
          },
          {
            name: "Community and Regional Development",
            y: 38
          },
          {
            name: "Education, Training, Employment, and Social Services",
            y: 95
          },
          {
            name: "Energy",
            y: 5
          },
          {
            name: "General Government",
            y: 17
          },
          {
            name: "General Science, Space, and Technology",
            y: 31
          },
          {
            name: "Health",
            y: 62
          },
          {
            name: "Income Security",
            y: 168
          },
          {
            name: "International Affairs",
            y: 52
          },
          {
            name: "Medicare",
           ...