Book Image

Sencha Charts Essentials

By : Ajit Kumar
Book Image

Sencha Charts Essentials

By: Ajit Kumar

Overview of this book

Table of Contents (16 chapters)
Sencha Charts Essentials
About the Author
About the Reviewers

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