Creating the same charts over and over again can become tiresome, especially if the only elements that change are the data or a few small details. In this recipe, we'll uncover how we can define charts in a way that we can extend and change to make new charts.
For setting up a basic ExtJS project with Highcharts, refer to the Getting ready section of the Using Highcharts in ExtJS recipe discussed earlier in this chapter.
To get started, perform the following steps:
Create a new
my_project/Custom
folder, and create aCustomChart.js
file within it.Within
CustomChart.js
, define our class using the following code:Ext.define('Custom.SplineChart', { });
Our class should extend
Chart.ux.Highcharts
, as shown in the following code:Ext.define('Custom.SplineChart', { extend: 'Chart.ux.Highcharts' });
Define any option we want for our new chart. Also, include anything we would require:
Ext.require('Chart.ux.Highcharts.SplineSeries...