ZoomCharts Documentation

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:

• TimeChart.themes.flat - a simple flat theme.
• TimeChart.themes.round - a simple theme with round accents.
• TimeChart.themes.gradient - a nice shaded theme.

Custom theming

Pie Chart is 99% canvas based - the only part that is DOM is background, info popup and resizer.

DOM structure

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.

Pie Chart uses the following HTML structure.

• <div class="DVSL-container chartThemeClass"> - Main container, theme class name is specified here.
  • <div class="DVSL-background" </div> - Area background layer.
  • <canvas class="DVSL-canvas" </canvas> - Canvas containing area grid and data series.
  • <div class="DVSL-border" </div> - Extra full chart layer for outer border.
  • <div class="DVSL-resizer" </div> - Resizer handle.
  • <div> </div> - Mouse and keyboard input tracking layer.
  • <div class="DVSL-info-center"> - Hover info bar.
• </div>

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:

• fill - CSS color string for filling areas and painting text.
• shadowOffsetX - shadow offset X in pixels
• shadowOffsetY - shadow offset Y in pixels
• shadowBlur - shadow blur size in pixels
• shadowColor - CSS color string for shadow

Text attributes:

• font - CSS font string.

Line attributes:

• lineColor - CSS color string for painting lines
• lineWidth - line with in pixels

Color strings can be one of the following:

• "#123456"or "#123" - HTML color code
• "red"- HTML color name
• "rgb(100,120,120)" - opaque color
• "rgba(100,120,120, 0.5)" - transparent color