CanvasXpress UI Styles

Introduction to UI Styles

The HTML widgets around a chart (the toolbar, context menus, the Customizer, the data table, the data filters and the dialogs) are drawn in a UI style. A style sets the accent colour, the bars and borders, and the table striping. The widgets’ looks are styles of the one theme parameter: theme: "bms" keeps the default chart look and gives the widgets the BMS look, while the website styles (paper, slate, ocean…) style the chart and its widgets together. Border density is a separate choice, dataUIStyle: default or minimal (every border softened); row stripes in the data table are the dataTableStriped toggle.

Every style has a light and a dark form. In dark, all styles share the same dark surfaces and text, and each keeps its own accent colour, lightened so it stays easy to read on a dark background. This page shows some of the built-in styles; new styles may be added over time.

Choosing a Style

Three options work together: theme picks the style (a widgets look on its own, or a chart theme plus a widgets look as [chart, widgets]), dataUIStyle picks the border density (default or minimal), and widgetsTheme picks light or dark.

var cX = new CanvasXpress("canvasId", data, {
  graphType: "Boxplot",
  theme: "bms",           // widgets look: "modern" (default), "bms", "colorful", "rdc", "ngs360";
                          // or a chart theme plus a look: ["economist", "bms"]
  dataUIStyle: "minimal", // border density: "default" or "minimal" (soft borders)
  dataTableStriped: false // row stripes in the data table (default true)
  widgetsTheme: "dark"    // "theme" (default), "light", "dark" or "auto"
});

The CanvasXpress chart theme is theme: "cx"; its blue widgets look is theme: ["cx", "cx"] (or dataUIStyle: "cx"). The former colour values of dataUIStyle keep working and fill the widgets slot; the former stripped value turns the row stripes off.

Styles

Each style shown in light and dark, side by side, in the Customizer’s Legends panel and the data filter panel. In dark, the surfaces and text are shared; the accent is each style’s own, lightened for the dark background. The neutral styles (stripped, old, ngs360) stay neutral.

modern

The default. Indigo accent with an indigo title bar on the data table and filters, and light-indigo row striping.

Customizer

Data filters

cx

CanvasXpress blue accent with a grey title bar and grey row striping.

Customizer

Data filters

stripped

Minimal and neutral: grey accent with the faintest, translucent hairlines.

Customizer

Data filters

minimal

Nearly borderless: stripped with every outer frame (data table, filter and Customizer panels, menus) drawn in the same faint hairline as the inner borders. Data table headers show their menu, filter and resize icons only on hover (dataTableHeaderIcons); sorting and an active filter stay visible.

Customizer

Data filters

old

Neutral grey accent; data table cells are coloured by their values.

Customizer

Data filters

bms

Purple accent on white bars.

Customizer

Data filters

colorful

Blue base accent, and each Customizer card and filter gets its own colour from a nine-colour palette. Data table cells are coloured by value and the selected row is highlighted in amber.

Customizer

Data filters

rdc

Neutral grey accent, with the RDC logo in the data table banner.

Customizer

Data filters

ngs360

Blue accent with light-blue row striping, with the NGS360 logo in the data table banner.

Customizer

Data filters