title: Highcharts stacked drilldown with n-levels
body: <p>I am trying to make a column stacked chart along with drilldown but highcharts API doesnt support it as of now it seems. Have done a bit but its not working properly. <a href="http://jsfiddle.net/souranil/T6ryr/" rel="nofollow">http://jsfiddle.net/souranil/T6ryr/</a>.</p>
  
  <pre><code>Highcharts.setOptions({
      lang: {
          FullScreenButtonTitle: "View Larger Chart"
      }
  });
  
  $(function () {
      var chart;
      $(document).ready(function () {
  
      var colors = Highcharts.getOptions().colors,
          categories = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
          name = 'AUM',
          data = [{
              y: 6.06,
              color: '#B7C726',
              drilldown: {
                  categories: ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
                  series: [{
                      name: 'Page4',
                      data: [6.06, 7.90, 11.40],
                      color: '#74489D'
                  }, {
                      name: 'Page3',
                      data: [5.73, 7.26, 11.03],
                      color: '#B7C726'
                  }, {
                      name: 'Page2',
                      data: [5.71, 6.98, 10.73, 11.92],
                      color: '#7CCCBF'
                  }, {
                      name: 'Page1',
                      data: [5.58, 6.70, 10.31, 11.66, 0],
                      color: '#F3901D'
                  }]
              } // drilldown
          }, {
              y: 7.9, //MA 10
              color: '#B7C726',
              drilldown: {
                  categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                  series: [{
                      name: 'Page4',
                      data: [6.06, 7.90, 11.40],
                      color: '#74489D'
                  }, {
                      name: 'Page3',
                      data: [5.73, 7.26, 11.03],
                      color: '#B7C726'
                  }, {
                      name: 'Page2',
                      data: [5.71, 6.98, 10.73, 11.92],
                      color: '#7CCCBF'
                  }, {
                      name: 'Page1',
                      data: [5.58, 6.70, 10.31, 11.66, 0],
                      color: '#F3901D'
                  }]
              } // drilldown
  
          }, {
              y: 11.4, //MA 11
              color: '#B7C726',
              drilldown: {
                  categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                  series: [{
                      name: 'Page4',
                      data: [6.06, 7.90, 11.40],
                      color: '#74489D'
                  }, {
                      name: 'Page3',
                      data: [5.73, 7.26, 11.03],
                      color: '#B7C726'
                  }, {
                      name: 'Page2',
                      data: [5.71, 6.98, 10.73, 11.92],
                      color: '#7CCCBF'
                  }, {
                      name: 'Page1',
                      data: [5.58, 6.70, 10.31, 11.66, 0],
                      color: '#F3901D'
                  }]
              } // drilldown
          }, {
              y: 11.92, //MA 12
              color: '#B7C726',
              drilldown: {
                  categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                  series: [{
                      name: 'Page4',
                      data: [6.06, 7.90, 11.40],
                      color: '#74489D'
                  }, {
                      name: 'Page3',
                      data: [5.73, 7.26, 11.03],
                      color: '#B7C726'
                  }, {
                      name: 'Page2',
                      data: [5.71, 6.98, 10.73, 11.92],
                      color: '#7CCCBF'
                  }, {
                      name: 'Page1',
                      data: [5.58, 6.70, 10.31, 11.66, 0],
                      color: '#F3901D'
                  }]
              } // drilldown
          }, {
              y: 10, //MA 13
              color: '#B7C726',
              drilldown: {
                  categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
                  series: [{
                      name: 'Page4',
                      data: [6.06, 7.90, 11.40],
                      color: '#74489D'
                  }, {
                      name: 'Page3',
                      data: [5.73, 7.26, 11.03],
                      color: '#B7C726'
                  }, {
                      name: 'Page2',
                      data: [5.71, 6.98, 10.73, 11.92],
                      color: '#7CCCBF'
                  }, {
                      name: 'Page1',
                      data: [5.58, 6.70, 10.31, 11.66, 0],
                      color: '#F3901D'
                  }]
              } // drilldown
          }];
  
  
  
      data2 = [{
          y: 6.85, //OA09
          color: '#636466',
          drilldown: {
              categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
              series: [{
                  name: 'Page4',
                  data: [6.85, 7.52, 8.45],
                  color: '#74489D'
              }, {
                  name: 'Page3',
                  data: [6.50, 7.16, 8.11, 0],
                  color: '#B7C726'
              }, {
                  name: 'Page2',
                  data: [6.35, 7.01, 8.04, 8.52, 0],
                  color: '#7CCCBF'
              }, {
                  name: '1st quarter',
                  data: [6.25, 6.85, 4.61, 8.52, 0],
                  color: '#F3901D'
              }]
          } // drilldown
      }, {
          y: 7.52, //OA10
          color: '#636466',
          drilldown: {
              categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
              series: [{
                  name: 'Page4',
                  data: [6.85, 7.52, 8.45],
                  color: '#74489D'
              }, {
                  name: 'Page3',
                  data: [6.50, 7.16, 8.11, 0],
                  color: '#B7C726'
              }, {
                  name: 'Page2',
                  data: [6.35, 7.01, 8.04, 8.52, 0],
                  color: '#7CCCBF'
              }, {
                  name: 'Page1',
                  data: [6.25, 6.85, 4.61, 8.52, 0],
                  color: '#F3901D'
              }]
          } // drilldown
      }, {
          y: 8.45, //OA11
          color: '#636466',
          drilldown: {
              categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
              series: [{
                  name: 'Page4',
                  data: [6.85, 7.52, 8.45],
                  color: '#74489D'
              }, {
                  name: 'Page3',
                  data: [6.50, 7.16, 8.11, 0],
                  color: '#B7C726'
              }, {
                  name: 'Page2',
                  data: [6.35, 7.01, 8.04, 8.52, 0],
                  color: '#7CCCBF'
              }, {
                  name: 'Page1',
                  data: [6.25, 6.85, 4.61, 8.52, 0],
                  color: '#F3901D'
              }]
          } // drilldown
      }, {
          y: 8.57, //OA12
          color: '#636466',
          drilldown: {
              categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
              series: [{
                  name: 'Page4',
                  data: [6.85, 7.52, 8.45],
                  color: '#74489D'
              }, {
                  name: 'Page3',
                  data: [6.50, 7.16, 8.11, 0],
                  color: '#B7C726'
              }, {
                  name: 'Page2',
                  data: [6.35, 7.01, 8.04, 8.52, 0],
                  color: '#7CCCBF'
              }, {
                  name: 'Page1',
                  data: [6.25, 6.85, 4.61, 8.52, 0],
                  color: '#F3901D'
              }]
          } // drilldown
      }, {
          y: 33, //OA13
          color: '#636466',
          drilldown: {
              categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
              series: [{
                  name: 'Page4',
                  data: [6.85, 7.52, 8.45],
                  color: '#74489D'
              }, {
                  name: 'Page3',
                  data: [6.50, 7.16, 8.11, 0],
                  color: '#B7C726'
              }, {
                  name: 'Page2',
                  data: [6.35, 7.01, 8.04, 8.52, 0],
                  color: '#7CCCBF'
              }, {
                  name: 'Page1',
                  data: [6.25, 6.85, 4.61, 8.52, 0],
                  color: '#F3901D'
              }]
          } // drilldown
      }];
  
      function setChart(name, categories, data, color) {
          var len = chart.series.length;
          chart.yAxis[0].options.stackLabels.enabled = true;
          chart.xAxis[0].setCategories(categories);
          for (var i = 0; i &lt; len; i++) {
              console.log(chart.series.length);
              chart.series[0].remove();
          }
          //console.log('a');
          if (data.series) {
              for (var i = 0; i &lt; data.series.length; i++) {
                  chart.addSeries({
                      name: data.series[i].name,
                      data: data.series[i].data,
                      color: data.series[i].color || 'white',
                      stacking: 'norma'
                  });
              }
          } else {
              chart.addSeries({
                  name: name,
                  data: data
                  //color: 'white'
              }, {
                  name: name,
                  data: data2
                  //color: 'white'
              });
          }
      }
  
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              type: 'column'
          },
  
          title: {
              text: 'Highcharts Nested drilldown'
          },
          subtitle: {
              text: 'Lets see how good highcharts is ...'
          },
          xAxis: {
              categories: categories
          },
          yAxis: {
              title: {
                  text: 'Volume',
                  style: {
                      color: '#006633'
                  }
              },
              stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || 'gray'
                  },
  
  
  
                  formatter: function () {
                      return this.y;
                      //return Highcharts.numberFormat(this.total, 2, '.')
                      /*var i = 0;
                      if (this.total &lt; 0) {
                          return '';
                      } else {
                          var total = 0;
                          $.each(this.axis.chart.series, function(j, serie) {
                              total += serie.options.data[i];
                          });
                          i++;
                          return Highcharts.numberFormat(total, 2, ',');
                     }*/
                  } // formatter
              },
              labels: {
                  formatter: function () {
                      return this.value;
                  },
                  style: {
                      color: '#006633'
                  }
              }
          },
  
          legend: {
              enabled: false
          },
  
          plotOptions: {
              column: {
                  cursor: 'pointer',
                  point: {
                      events: {
                          click: function () {
                              var drilldown = this.drilldown;
                              if (drilldown) { // drill down
                                  chart.setTitle({
                                      text: this.series.name
                                  })
                                  //chart.yAxis[0].options.tickInterval = 0.5;
                                  chart.yAxis[0].options.stackLabels.enabled = false;
                                  setChart(null, drilldown.categories, drilldown);
                              } else { // restore
                                  window.location.reload(true);
                              }
                          }
                      }
                  },
                  dataLabels: {
                      enabled: true,
                      color: 'white',
                      style: {
                          fontWeight: 'normal'
                      },
                      formatter: function () {
                          return this.y + ' ';
                      },
                      formatter: function () {
                          return Highcharts.numberFormat(this.y, 2, '.')
                      }
                  }
              }
          },
          tooltip: {
              formatter: function () {
                  /*var i = 0;
                      if (this.total &lt; 0) {
                          return '';
                      } else {
                          var total = 0;
  
                          $.each(this.axis.chart.series, function(j, serie) {
                              total += serie.options.data[i];
  
                          });
  
                          i++;
                          //return stotal;
  
                      }*/
                  var series = this.series.chart.series,
                      total = 0,
                      x = this.point.x,
                      i;
  
                  for (i = 0; i &lt; series.length; i++)
                  total += series[i].data[x].y
  
                  //return this.series.name+': '+this.y+'&lt;br/&gt;'+
                  // 'total: '+ Highcharts.numberFormat(total, 2, '.');
  
  
                  var point = this.point,
                      s = this.series.name + ' : ' + this.x + ':&lt;b&gt;' + this.y + '($b)&lt;/b&gt;&lt;br/&gt;';
                  //s += 'total: '+ Highcharts.numberFormat(total, 2, '.');
  
  
  
                  if (point.drilldown) {
                      s += 'Click to view chapters';
                  } else {
                      //s += 'Click to return to yearly figures';
                      s += 'Total: ' + Highcharts.numberFormat(total, 2, '.');
                  }
  
                  if (this.series.type == 'arearange') {
                      s = this.series.name + ' : ' + this.x + ':&lt;b&gt;' + '20-25($b)&lt;/b&gt;&lt;br/&gt;';
                  }
                  return this.series.name;
              }
          },
          series: [{
              type: 'column',
              name: 'Chapter1',
              data: data,
              color: '#B7C726'
          }, {
              type: 'column',
              name: 'Chapter2',
              data: data2,
              color: '#636466'
          }],
          exporting: {
              enabled: true
          },
      });
  
      var allseries = chart.series;
  
  
  
  
      });
  
  
  
  });
  </code></pre>
  
  <p>I need to handle stuff differently on stack element clicks and xAxis label clicks. </p>
  
  <ol>
  <li>On clicking xAxis labels it should drilldown to a column chart with the next level data ( if more drilldown is not present else a stacked column chart again ).</li>
  <li>If a stack element is clicked it should drilldown to a normal column chart containing the nested data. </li>
  </ol>
  
  <p>Has anyone done it yet?</p>