ZoomCharts Documentation

Version: 1.21.1 (2025-02-07)
Switch to Version 2.0 (BETA)

Themes

Theme is a collection of configuration options that extends the default configuration.

Specifying theme

Theme is specified by setting settings.theme field.

Time chart provides several default themes to start with:

Developing themes

Time Chart consists of a combination of DOM and Canvas layers. This approach provides optimum performance while maintaining great visual look.

This approach splits theming into two parts - customizing DOM via CSS and customizing parts rendered on Canvas via settings.

CSS

The HTML structure has fixed class names you can use to define CSS rules. The root element has a configurable class, that is specified using settings.themeCSSClass setting.

Time Chart uses the following HTML structure.

Chart layout

Elements rendered on Canvas

The following elements are rendered on canvas and their style is specified via settings object.

Style parameters in settings

We stay close to CSS syntax when defining style for rendered elements.

Some fields have custom attributes for element specific aspects. See Settings documentation for details.

Common attributes:

Text attributes:

Line attributes:

Color strings can be one of the following:

X