Drilldown to a Stacked Column - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

Drilldown to a Stacked Column

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-range-selector-buttons {//from  w w w  . j av  a2 s. co  m
   display: none;
}
.highcharts-input-group {
   display: none;
}


      </style> 
      <script type="text/javascript">
$(function() {
    // Create the chart
    window.chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        rangeSelector: {
            enabled: false
        },
        navigator: {
              enabled: true,
            series: {
                type: 'column'
            },
            xAxis: {
               labels: {
                 enabled: false
              }
            }
        },
        title: {
            text: 'Comments filtered'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
        "name":"",
        "colorByPoint":true,
        "data":[{
                 "name":"1",
              "y":1627500,
              "drilldown":1
              },{
              "name":"66",
              "y":2293849.3333333,
              "drilldown":66
              }]
        }],
        drilldown: {
           series: [{
                  name:"filtered on spam",
            data:[['youtube',234],['facebook',2345],['stackoverflow', 2435]],
            id:1
          }, {
              name:"filtered on spam",
              data:[['youtube',111],['facebook',2222],['stackoverflow', 3333]],
              id:66
          }]
        },
        credits: {
            enabled: false
        }
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
      <div id="container" style="height: 500px; min-width: 500px"></div>  
   </body>
</html>

Related Tutorials