title: Highcharts drilldown not working when module is imported react
body: <p>I am new to react/ES6. I am using highcharts 4.2.4 with react in ES6 by creating a highcharts component as given in: <a href="http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react" rel="nofollow">http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react</a>. I am using ES6 and importing highcharts as import Highcharts from 'highcharts' where highcharts is a npm module mentioned in package.json.</p>
  
  <p>I went through the highcharts drilldown examples. I took the chart given the drilldown example: <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/" rel="nofollow">http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/</a> having the following chartOptions:</p>
  
  <pre><code>{
      chart: {
          type: 'column'
      },
      title: {
          text: 'Browser market shares. January, 2015 to May, 2015'
      },
      subtitle: {
          text: 'Click the columns to view versions.'
      },
      xAxis: {
          type: 'category'
      },
      yAxis: {
          title: {
              text: 'Total percent market share'
          }
  
      },
      legend: {
          enabled: false
      },
      plotOptions: {
          series: {
              borderWidth: 0,
              dataLabels: {
                  enabled: true,
                  format: '{point.y:.1f}%'
              }
          }
      },
  
      tooltip: {
          headerFormat: '&lt;span style="font-size:11px"&gt;{series.name}&lt;/span&gt;&lt;br&gt;',
          pointFormat: '&lt;span style="color:{point.color}"&gt;{point.name}&lt;/span&gt;: &lt;b&gt;{point.y:.2f}%&lt;/b&gt; of total&lt;br/&gt;'
      },
  
      series: [{
          name: 'Brands',
          colorByPoint: true,
          data: [{
              name: 'Microsoft Internet Explorer',
              y: 56.33,
              drilldown: 'Microsoft Internet Explorer'
          }, {
              name: 'Chrome',
              y: 24.03,
              drilldown: 'Chrome'
          }, {
              name: 'Firefox',
              y: 10.38,
              drilldown: 'Firefox'
          }, {
              name: 'Safari',
              y: 4.77,
              drilldown: 'Safari'
          }, {
              name: 'Opera',
              y: 0.91,
              drilldown: 'Opera'
          }, {
              name: 'Proprietary or Undetectable',
              y: 0.2,
              drilldown: null
          }]
      }],
      drilldown: {
          series: [{
              name: 'Microsoft Internet Explorer',
              id: 'Microsoft Internet Explorer',
              data: [
                  [
                      'v11.0',
                      24.13
                  ],
                  [
                      'v8.0',
                      17.2
                  ],
                  [
                      'v9.0',
                      8.11
                  ],
                  [
                      'v10.0',
                      5.33
                  ],
                  [
                      'v6.0',
                      1.06
                  ],
                  [
                      'v7.0',
                      0.5
                  ]
              ]
          }, {
              name: 'Chrome',
              id: 'Chrome',
              data: [
                  [
                      'v40.0',
                      5
                  ],
                  [
                      'v41.0',
                      4.32
                  ],
                  [
                      'v42.0',
                      3.68
                  ],
                  [
                      'v39.0',
                      2.96
                  ],
                  [
                      'v36.0',
                      2.53
                  ],
                  [
                      'v43.0',
                      1.45
                  ],
                  [
                      'v31.0',
                      1.24
                  ],
                  [
                      'v35.0',
                      0.85
                  ],
                  [
                      'v38.0',
                      0.6
                  ],
                  [
                      'v32.0',
                      0.55
                  ],
                  [
                      'v37.0',
                      0.38
                  ],
                  [
                      'v33.0',
                      0.19
                  ],
                  [
                      'v34.0',
                      0.14
                  ],
                  [
                      'v30.0',
                      0.14
                  ]
              ]
          }, {
              name: 'Firefox',
              id: 'Firefox',
              data: [
                  [
                      'v35',
                      2.76
                  ],
                  [
                      'v36',
                      2.32
                  ],
                  [
                      'v37',
                      2.31
                  ],
                  [
                      'v34',
                      1.27
                  ],
                  [
                      'v38',
                      1.02
                  ],
                  [
                      'v31',
                      0.33
                  ],
                  [
                      'v33',
                      0.22
                  ],
                  [
                      'v32',
                      0.15
                  ]
              ]
          }, {
              name: 'Safari',
              id: 'Safari',
              data: [
                  [
                      'v8.0',
                      2.56
                  ],
                  [
                      'v7.1',
                      0.77
                  ],
                  [
                      'v5.1',
                      0.42
                  ],
                  [
                      'v5.0',
                      0.3
                  ],
                  [
                      'v6.1',
                      0.29
                  ],
                  [
                      'v7.0',
                      0.26
                  ],
                  [
                      'v6.2',
                      0.17
                  ]
              ]
          }, {
              name: 'Opera',
              id: 'Opera',
              data: [
                  [
                      'v12.x',
                      0.34
                  ],
                  [
                      'v28',
                      0.24
                  ],
                  [
                      'v27',
                      0.17
                  ],
                  [
                      'v29',
                      0.16
                  ]
              ]
          }]
      }
  }
  </code></pre>
  
  <p>However , I noticed that though the chart is rendered fine, clicking on any column is not triggering the drilldown. However, if instead of importing Highcharts as above and including the lines:</p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/drilldown.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>in the index.html, the drilldown is happening fine. I even tried including the following in the high charts component: </p>
  
  <p>import {drilldown} from /highcharts/modules/drilldown.js'</p>
  
  <p>but was of no help. Could you please suggest where I am going wrong and how to get the highcharts component running with drilldown?</p>