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");

Themes that match this website’s styles

Every style you can pick with the palette icon in the navigation bar is also a chart theme with the same name: paper, slate, mono, sunrise (light) and ocean, midnight, graphite, forest (always dark). One name does it all: it styles the chart and its UI widgets (toolbar, menus, Customizer, data table, dialogs), and it is what the page, the Dashboards app and the charts share when you pick it here. A chart that sets no theme of its own simply takes the page’s pick; an explicit theme always wins. They are in the right-click Theme menu and the Customizer like every other theme.

new CanvasXpress("canvasId", data, { graphType: "Bar", theme: "ocean" });

Every theme styles its widgets

The classic chart themes do the same: theme: "economist", "ggplot", "wsj", "tableau", "stata", "solarized", "excel", "highcharts", "paultol", "editorial", "bw", "highcontrast"… each gives the UI widgets a palette derived from the theme’s own accent. Aliases keep working and mean the same style: wsj = wallstreet = wallstreetjournal; ggplot = grey = gray = igray; paultol = paulTol = ptol; void = void0; bw = blackAndWhite; highcontrast = hc; cx2 = CanvasXpressTraditional. theme: "cx" (the CanvasXpress chart theme) and "auto" leave the widgets as they are. Every theme is also a page style in this site’s palette menu.

One parameter for the widgets too

The UI widgets’ colour looks — modern (the default), bms, colorful, rdc, ngs360 — are styles of the same theme parameter: theme: "bms" keeps the default chart look and gives the widgets the BMS look. To combine a chart theme with a widgets look, pass both: theme: ["economist", "bms"] (chart, widgets). The CanvasXpress chart theme stays theme: "cx"; its blue widgets look is ["cx", "cx"]. dataUIStyle is now only the border density of the widgets — default or minimal (every border softened) — and composes with any theme: theme: "ocean", dataUIStyle: "minimal"; row stripes in the data table are the dataTableStriped toggle. The old colour values of dataUIStyle keep working.

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.