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