Themes & Color Schemes

Two Independent Controls

A theme controls the chart’s non-data elements — titles, legends, axes, gridlines, panel and plot backgrounds and fonts. A color scheme controls how the data itself is colored. They are set independently, so you can pair any theme with any palette.

Themes

Set the theme configuration parameter, or call setTheme(name) on a live chart. CanvasXpress ships a large set of built-in themes — the core CanvasXpress, CanvasXpressDark, CanvasXpressBlue and CanvasXpressTraditional, plus many themed palettes — all browsable from the chart’s right-click Theme menu and the Customizer.

var cXTheme = new CanvasXpress("canvasTheme", themeData, {
  graphType: "Bar",
  theme: "CanvasXpressBlue",
  title: "Quarterly Revenue"
});

// or change it live
cXTheme.setTheme("CanvasXpressDark");

Color Schemes

colorScheme selects the palette used to color groups and series. The default User takes the colors you provide in colors; otherwise choose one of the built-in ColorBrewer schemes (YlGnBu, Set1, Spectral, …). Colors are selected sequentially in the palette order as the chart needs them.

// your own colors
{ colorScheme: "User", colors: ["#1f77b4", "#ff7f0e", "#2ca02c"] }

// a built-in ColorBrewer scheme
{ colorScheme: "Spectral" }

From the Menus

Right-click any chart and open Theme to preview every built-in theme, or use the Customizer to set the theme and color scheme together. The chart’s surrounding widgets follow the theme via widgetsTheme (see UI Styles); light and dark are handled automatically.