A chart provides a theme config, which can be used to associate a chart theme to it. A chart theme is a subclass of the Ext.chart.theme.Base class. The framework offers various subclasses, which can be used to style our chart. These classes are located under the ext/packages/sencha-charts/src/chart/theme folder.

For example, we can use the PurpleGradients class and configure theme on the cartesian and pie chart with an alias name—purple-gradients:

theme: 'purple-gradients'

The theme produces the following results:

Similarly, we can try other existing themes to see which one suits our requirements.

However, none of them are close to our need, as before we had a custom background image and a series rendered in different colors. Also, the labels need to be styled differently for the axes. So, we have to define our own custom theme. Here is definition of our custom theme, awesome:

Ext.define('SCE.view.chart.theme.Awesome', {
    extend: 'Ext.chart.theme.Base',
    singleton...