Introducing chart themes

Chart themes are classes that contain preconfigured looks for our charts. This one has been added to the Ext JS framework since version 5.0.1. So, for you to get a clearer idea, let's take a look at the ext-5.x.x/packages/sencha-charts/src/chart/theme folder. You will see many files, as shown here:

These files or themes (classes) extend the Ext.chart.theme.Base class. Also, these classes are singleton (singleton:true) in order to use the same instance when referenced. As an example, let's make a duplicate of the first code example (bar chart):

1. Define a new chart theme as follows:

   Ext.require([
     'Ext.*',
     'Ext.draw.*',
     'Ext.chart.*'
   ]);
   
   Ext.define('Ext.chart.theme.myChartTheme', {
       extend: 'Ext.chart.theme.Base',
       singleton: true,
       alias: [
           'chart.theme.mychartTheme',
           'chart.theme.myChartTheme'
       ],
       config: {
           baseColor: '#65a9e0',
           gradients: {
               type: 'linear',
               degrees: 90
           }
       }
   });
   ...