title: Highcharts - Can a column chart drill down to a bar chart?
body: <p>I have a project where the data in the main chart is best represented as a column chart and the data in a drilldown should be a bar chart.</p>
  
  <p>However when I try to drilldown, the drilldown is still a column chart even with the type set to bar.</p>
  
  <p>Is this possible to do with the provided Highcharts drilldown API?  I would like to have the "back" button and support multiple drilldown levels.</p>
  
  <p>Here is a basic example that demonstrates the problem:</p>
  
  <pre><code>$(function () {    
  
  // Create the chart
  $('#container').highcharts({
      chart: {
          type: 'column'
      },
      title: {
          text: 'Basic drilldown'
      },
      xAxis: {
          type: 'category'
      },
  
      legend: {
          enabled: false
      },
  
      plotOptions: {
          series: {
              borderWidth: 0,
              dataLabels: {
                  enabled: true,
              }
          }
      },
  
      series: [{
          name: 'Things',
          colorByPoint: true,
          data: [{
              name: 'Animals',
              y: 5,
              drilldown: 'animals'
          }, {
              name: 'Fruits',
              y: 2,
              drilldown: 'fruits'
          }, {
              name: 'Cars',
              y: 4,
              drilldown: 'cars'
          }]
      }],
      drilldown: {
          series: [{
              id: 'animals',
              type: 'bar',
              data: [
                  ['Cats', 4],
                  ['Dogs', 2],
                  ['Cows', 1],
                  ['Sheep', 2],
                  ['Pigs', 1]
              ]
          }, {
              id: 'fruits',
              type: 'bar',
              data: [
                  ['Apples', 4],
                  ['Oranges', 2]
              ]
          }, {
              id: 'cars',
              type: 'bar',
              data: [
                  ['Toyota', 4],
                  ['Opel', 2],
                  ['Volkswagen', 2]
              ]
          }]
      }
  })
  });
  </code></pre>
  
  <p>Here is a JSFIDDLE</p>
  
  <p><a href="http://jsfiddle.net/N2g98/" rel="nofollow">http://jsfiddle.net/N2g98/</a></p>
  
  <p><strong>EDIT:  This seems like it could be considered a bug in Highcharts as it is more of a problem than just drilling down from a column to a bar chart.  If you start with a bar graph and drill down to a line graph, the axes are messed up in the drilldown.</strong></p>
  
  <p><strong>EDIT2: Here is the solution I ended up with</strong></p>
  
  <pre><code> $(function () {
  
   (function (H) {
  
       H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
           var point = proceed.call(this, series, options, x),
               chart = series.chart,
               tick = series.xAxis &amp;&amp; series.xAxis.ticks[x],
               tickLabel = tick &amp;&amp; tick.label;
  
           if (point.drilldown) {
  
               if (tickLabel) {
                   if (!tickLabel._basicStyle) {
                       tickLabel._basicStyle = tickLabel.element.getAttribute('style');
                   }
                   tickLabel.addClass('highcharts-drilldown-axis-label').css({
                       'text-decoration': 'none',
                           'font-weight': 'normal',
                           'cursor': 'auto'
                   }).on('click', function () {
                       if (point.doDrilldown) {
                           return false;
                       }
                   });
               }
           }
  
  
           return point;
       });
  
       H.wrap(H.Pointer.prototype, 'setDOMEvents', function (proceed) {
           proceed.call(this);
           var pointer = this,
               container = pointer.chart.container;
           container.onclick = function (e) {
               if (typeof pointer.onContainerClick === 'function') {
                   pointer.onContainerClick(e);
               }
           };
       });
  
       H.wrap(H.Chart.prototype, 'drillUp', function (proceed) {
           if (!this.customDrilldown) {
               proceed.call(this);
           } else {
               var userOptions = this.userOptions;
               var drilldownLevels = this.drilldownLevels;
               var level = drilldownLevels.pop();
               var newChartConfig = level.userOptions;
  
               this.destroy();
               $(userOptions.chart.renderTo).highcharts(newChartConfig);
               var newChart = $(userOptions.chart.renderTo).highcharts();
               newChart.drilldownLevels = drilldownLevels;
               if (drilldownLevels.length !== 0) {
                   newChart.showDrillUpButton();
               }
               newChart.customDrilldown = true;
  
               HighchartsAdapter.fireEvent(newChart, 'drillup', {
                   seriesOptions: newChartConfig
               });
           }
  
       });
  
  
  
       H.wrap(H.Point.prototype, 'doDrilldown', function (proceed, _holdRedraw) {
  
           if (!$.isPlainObject(this.drilldown)) {
               proceed.call(this, _holdRedraw);
           } else {
               var newChartConfig = this.drilldown;
               var oldChart = this.series.chart;
               var userOptions = oldChart.userOptions;
               var drilldownLevels = oldChart.drilldownLevels;
               if (!drilldownLevels) {
                   drilldownLevels = [];
               }
  
               var oldSeries = this.series;
               var level = {
                   userOptions: userOptions,
                   seriesOptions: oldSeries.userOptions
               };
  
  
               drilldownLevels.push(level);
  
               oldChart.destroy();
               $(userOptions.chart.renderTo).highcharts(newChartConfig);
               var newChart = $(userOptions.chart.renderTo).highcharts();
               newChart.drilldownLevels = drilldownLevels;
               newChart.showDrillUpButton();
               newChart.customDrilldown = true;
  
               HighchartsAdapter.fireEvent(newChart, 'drilldown', {
                   point: this,
                   seriesOptions: newChartConfig
               });
  
           }
  
       });
   }(Highcharts));
  
  
   var pieDD1 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 5
           }, {
               name: 'Blue',
               y: 25
           }]
       }]
  
   };
  
        var pieDD2 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 15
           }, {
               name: 'Blue',
               y: 25
           }]
       }]
  
   };
  
        var pieDD3 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 3
           }, {
               name: 'Blue',
               y: 5
           }]
       }]
  
   };
  
        var pieDD4 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 50
           }, {
               name: 'Blue',
               y: 3
           }]
       }]
  
   };
  
        var pieDD5 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 13
           }, {
               name: 'Blue',
               y: 11
           }]
       }]
  
   };
  
        var pieDD6 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 50
           }, {
               name: 'Blue',
               y: 25
           }]
       }]
  
   };
  
        var pieDD7 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 5
           }, {
               name: 'Blue',
               y: 5
           }]
       }]
  
   };
  
        var pieDD8 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 15
           }, {
               name: 'Blue',
               y: 5
           }]
       }]
  
   };
  
        var pieDD9 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 4
           }, {
               name: 'Blue',
               y: 8
           }]
       }]
  
   };
  
        var pieDD10 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 33
           }, {
               name: 'Blue',
               y: 66
           }]
       }]
  
   };
  
        var pieDD11 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 9
           }, {
               name: 'Blue',
               y: 1
           }]
       }]
  
   };
  
        var pieDD12 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 8
           }, {
               name: 'Blue',
               y: 13
           }]
       }]
  
   };
  
        var pieDD13 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 70
           }, {
               name: 'Blue',
               y: 25
           }]
       }]
  
   };
  
        var pieDD14 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 50
           }, {
               name: 'Blue',
               y: 10
           }]
       }]
  
   };
  
        var pieDD15 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 8
           }, {
               name: 'Blue',
               y: 5
           }]
       }]
  
   };
  
        var pieDD16 = {
       chart: {
           type: 'pie'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'colors'
       },
       series: [{
           name: 'Color',
           data: [{
               name: 'Red',
               y: 5
           }, {
               name: 'Blue',
               y: 8
           }]
       }]
  
   };
  
  
  
   var drilldown = {
       chart: {
           type: 'column'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'subtitle'
       },
       xAxis: {
           type: 'category',
           title: {
               text: 'X Axis'
           }
       },
       yAxis: {
           title: {
               text: 'Y Axis'
           }
       },
       plotOptions: {
           column: {
               stacking: 'normal'
           }
       },
       series: [{
           name: 'Widget A',
           data: [{
               name: 'Qtr 1',
               y: 5,
               drilldown: pieDD1
           }, {
               name: 'Qtr 2',
               y: 25,
               drilldown: pieDD2
           }, {
               name: 'Qtr 3',
               y: 25,
               drilldown: pieDD3
           }, {
               name: 'Qtr 4',
               y: 20,
               drilldown: pieDD4
           }]
       }, {
           name: 'Widget B',
           data: [{
               name: 'Qtr 1',
               y: 25,
               drilldown: pieDD5
           }, {
               name: 'Qtr 2',
               y: 5,
               drilldown: pieDD6
           }, {
               name: 'Qtr 3',
               y: 5,
               drilldown: pieDD7
           }, {
               name: 'Qtr 4',
               y: 15,
               drilldown: pieDD8
           }]
       }]
  
  
   };
  
   var drilldown2 = {
       chart: {
           type: 'column'
       },
       title: {
           text: 'Basic drilldown'
       },
       subtitle: {
           text: 'subtitle2'
       },
       xAxis: {
           type: 'category',
           title: {
               text: 'X Axis'
           }
       },
       yAxis: {
           title: {
               text: 'Y Axis'
           }
       },
       plotOptions: {
           column: {
               stacking: 'normal'
           }
       },
       series: [{
           name: 'Widget A',
           data: [{
               name: 'Qtr 1',
               y: 15,
               drilldown: pieDD9
           }, {
               name: 'Qtr 2',
               y: 15,
               drilldown: pieDD10
           }, {
               name: 'Qtr 3',
               y: 30,
               drilldown: pieDD11
           }, {
               name: 'Qtr 4',
               y: 5,
               drilldown: pieDD12
           }]
       }, {
           name: 'Widget B',
           data: [{
               name: 'Qtr 1',
               y: 5,
               drilldown: pieDD13
           }, {
               name: 'Qtr 2',
               y: 25,
               drilldown: pieDD14
           }, {
               name: 'Qtr 3',
               y: 10,
               drilldown: pieDD15
           }, {
               name: 'Qtr 4',
               y: 20,
               drilldown: pieDD16
           }]
       }]
  
  
   };
  
   // Create the chart
   $('#container').highcharts({
       chart: {
           type: 'bar'
       },
       title: {
           text: 'Basic drilldown'
       },
       xAxis: {
           type: 'category'
       },
       plotOptions: {
           column: {
               stacking: 'normal'
           }
       },
       series: [{
           name: 'Yearly Orders',
           data: [{
               name: 'Location 1',
               y: 100,
               drilldown: drilldown
           }, {
               name: 'Location 2',
               y: 150,
               drilldown: drilldown2
           }]
       }]
   });
   });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/skTHx/22/" rel="nofollow">http://jsfiddle.net/skTHx/22/</a></p>