CanvasXpress Software Design

Web Responsive Design

With CanvasXpress, you can create designs that are size adjustable and can be maximized to fill up your entire screen for better visualization. Now you can work smarter and easily spot trends in designs. Take, for example, these three graphs; all you need to do is hover your mouse on the graph, then click the maximize icon to zoom in and out. Press it again to reset back.

View

CanvasXpress provides out of the box advanced analytics features to get you up and running in no time. Get access to easy-to-use tools that let you see and understand your data. With our data filters and data tables, you can convert graphs into a data exploration framework without compromising the flow of analysis.

To use these tools, as seen in the example below, just hover your mouse over the graph and select the funnel-like icon to toggle the widgets.

Scalability

With CanvasXpress as a repository for your data, you can efficiently manage visual analysis, solve business problems, and gain insights for business growth. In contrast to other JavaScript libraries based on SVG, CanvasXpress is built on the <canvas> element fitted with innovative features that’ll take your analysis to the next level.

Here is an example of a heatmap that harbors more than a million data points.

Full Audit

Effective data visualization is key to business decision making and growth. With the CanvasXpress analytics solution, users can explore datasets without losing the original visualization due to changes in configurations. CanvasXpress tracks and stores a user's progress throughout the data exploration process, so a full audit of every change is available at any point in the timeline.

This unique feature of the CanvasXpress application is a convenient tool for education and reproducible research.

The example below shows a heat map that was completely reconfigured by the user during data exploration. To return this data to its original visualization, simply hover your mouse over the heatmap and click the time-reversed icon .

Atomic Image

CanvasXpress is a limitless visual analytics platform, and yet another groundbreaking feature is its ability to store data and all end-user custom modifications as metadata inside the image, awesome right?

You can easily bring back the entire data stored on an image file by dragging and dropping the file on the CanvasXpress visualization interface. This kind of round-trip — a chart image that still carries the data that produced it — is rare among visualization tools.

Theming the UI

The widgets around a chart (toolbar, context menus, Customizer, data table, data filters, dialogs and code viewer) share one set of design tokens. Pick a look with theme (the same parameter that styles the chart), choose the border density with dataUIStyle, switch the widgets to light or dark with one attribute, and fine-tune any colour with a CSS variable. Each chart keeps its own settings, so two charts on a page can look different.

Preset looks

theme names the look: a widgets look on its own — modern (default), bms, colorful, rdc, ngs360 — a chart theme plus a look as [chart, widgets], or one of the website styles (paper, slate, mono, sunrise, ocean, midnight, graphite, forest) that styles the chart and the widgets together. dataUIStyle is the border density: default or minimal (every border softened); dataTableStriped toggles the data table’s row stripes. Every look meets WCAG AA contrast.

new CanvasXpress("canvasId", data, { graphType: "Bar", theme: "colorful" });
new CanvasXpress("canvasId", data, { graphType: "Bar", theme: ["economist", "bms"], dataUIStyle: "minimal" });

Dark mode

The widgets follow the chart theme: theme: "cxdark" or "cxblue" makes them dark, and theme: "auto" follows the operating system, live. widgetsTheme sets them on their own: "light", "dark" or "auto" (default "theme", which follows the chart theme).

// dark chart, dark widgets
new CanvasXpress("canvasId", data, { graphType: "Bar", theme: "cxdark" });
// light chart, widgets that follow the OS appearance
new CanvasXpress("canvasId", data, { graphType: "Bar", widgetsTheme: "auto" });

On your own page, put data-cx-ui-theme="dark" (or "light", or "auto") on any container. Charts inside it that don't set a theme of their own follow it. If you change the container's theme after the charts exist, call chart.applyUITheme() on each.

<html data-cx-ui-theme="auto">   <!-- the whole page follows the OS -->
...
<div data-cx-ui-theme="dark">
  <canvas id="canvasId"></canvas>   <!-- this chart's widgets are dark -->
</div>

In dark mode each preset keeps its own accent colour: the same hue, made lighter so it reads on the dark panels as well as modern's indigo does. cx stays blue, bms purple, and the grey presets stay grey. colorful's per-item colours are lightened the same way. The accent is worked out from the chart's actual accent, so a custom accent gets a matching dark version too.

Your own colours

The widgets read semantic CSS variables. The main ones are --cx-ui-surface (panel background), --cx-ui-text, --cx-ui-text-muted, --cx-ui-border, --cx-ui-accent and --cx-ui-accent-strong (links, primary buttons), --cx-ui-accent-tint (hover and selection), --cx-ui-chrome (headers and banners) and --cx-ui-focus. Each chart writes its preset's colours on its own root, so override them with !important: on [data-cx-ui-scope] for every chart (including its menus and dialogs), or on #<canvasId>-cX-DOM for one chart.

/* every chart on the page: a teal accent */
[data-cx-ui-scope] { --cx-ui-accent: #0f766e !important; --cx-ui-accent-strong: #115e59 !important; }
/* one chart: a softer panel colour */
#canvasId-cX-DOM { --cx-ui-surface: #fbfaf7 !important; }

To pick the dark-mode accent yourself, set --cx-ui-dark-accent (accent, borders and controls), --cx-ui-dark-accent-strong (accent text and focus) and --cx-ui-dark-accent-tint (hover and selection) the same way. They apply only in dark mode.

/* every chart: a light teal accent in dark mode, the preset's accent in light mode */
[data-cx-ui-scope] { --cx-ui-dark-accent: #2dd4bf !important; --cx-ui-dark-accent-strong: #5eead4 !important; }

The older per-widget variables (for example --cx-datatable-border-color) still work and take precedence over the semantic ones, so existing customisations keep working.

Frequently Asked Questions