Chapter 7. Theming

We have created different types of charts. However, we did not do much about their styling—the fonts, color, background, animation, and so on. Styling is an important aspect of chart development and integrating charts into an application so that their look and feel gels with the overall application's look and feel. This chapter will focus solely on that aspect. In this chapter, we will cover the following topics:

• Styling a chart and its background

• Styling axes

• Styling different types of series

• Styling markers

• Styling legends

• Styling tooltips

• Styling labels

Sencha Charts offers three different mechanisms to style different aspects of a chart:

• Using configs

• Using a custom chart theme

• Using SASS

We will look at each one of these in detail to understand how we can offer a great looking chart to our users.

Getting ready

Check out the code from the GitHub repository and ensure that you see the following files in the ch07/app/view/main folder:

• Cartesian.js: This has the cartesian chart-related code and its style-related code.

• Polar.js: This has the polar chart with the radar series and its style-related code.

• Pie.js: This has the polar chart with the pie series and contains the pie series-specific styling code.

• ch07/app.js: This contains the following line, which you will have to modify to try different classes, mentioned above:

  autoCreateViewport: 'SCE.view.main.Cartesian'

Styling using configs

The first mechanism to style different aspects of a chart is using the various configurations available on different Sencha Charts classes. Let's review them one by one.

Chart

The AbstractChart class is the base class for different types of charts. This class offers various configurations that we can use to style a chart. In this section, we will look at the chart level configurations and you will learn how to style different aspects of a chart.

Framing

To create a nice frame around the chart, we can use the shadow config. The only thing that we have to take note of is that it can be used only if the chart is a floating component. So, once we set up the following configuration on our cartesian chart, we have to additionally pass the height, width, and autoShow properties:

...
title: 'Chart',

height: 500,
width: 500,
autoShow: true,

floating: true,
shadow: true,
...

This is done as it is a floating component and does not have a parent container, and hence whether it needs...

Theming using a custom theme

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...

Theming using SASS and CSS

Sencha Charts does not offer much in terms of styling charts, axes, series, sprites, and markers using SASS and CSS. This is not a problem because the Canvas drawings cannot be styled using CSS as they are not rendered as DOM elements. However, SVG is rendered as a DOM element and it is possible to style them with CSS. However, to make the APIs look and behave consistently across SVG and Canvas, the framework offers class-level configurations and derives the styles based on their values, which we saw in the earlier sections.

Having mentioned that there is one part of the chart that can be styled using CSS. The ext/packages/sencha-charts/sass folder defines SASS variables and theming code related to the legend. So, in order to modify the legend style, we will have to work with them.

Let's say, we want our legend to look like this:

We will change the following settings:

• Legend text is bigger than its default

• Colored circles are bigger than their default

• No rounded corners...

Summary

In this chapter, you learned about the different ways to style different aspects of a chart—background, axes, series, sprites, markers, and labels. We saw how we can create great-looking charts using the configurations or by defining a custom chart theme or using SASS and CSS.

In the next chapter, we will talk about building interactivity into the charts where users can interact with them to get more information out of them.