The Highcharts extension

In this section we are going to examine how simple it is to create a Highcharts component in Ext JS. We do this by importing from an existing Highcharts configuration. Let's continue from the previous JsonStore example and incorporate it with the extension.

Step 1 – removing some of the Highcharts options

Assume we already have a working independent Highcharts configuration, as follows:

var myConfig = {
      chart: {
            renderTo: 'container',
            width: 350,
            height: 300,
            ....
      },
      series: [{
          type: 'column',
          data: [ 126633683, 55840235, .... ]
      }],
      xAxis: { 
          categories: [ "192.168.200.145", 
                        "192.168.200.99", ... ],
          ....
      },
      yAxis: { .... },
      title: { .... },
      ....
};

The first step is to remove all the fields that the extension will internally handle and pass them to Highcharts. For that reason we need to remove chart.renderTo...