Charts

Thin, themed wrappers around Chart.js via vue-chartjs: DXBarChart, DXLineChart, and DXDoughnutChart. They apply the theme’s dedicated chart palette (read from the live theme — see below) and dashboard-friendly defaults (no x-axis gridlines, formatted value ticks and tooltips, responsive, legend hidden for a single series). Pass labels + datasets; options deep-merges over the defaults so you can override anything Chart.js supports.

Installation

The chart components live behind a separate entry so chart.js and vue-chartjs stay optional — a project that renders no charts installs neither. Install the two peers and import from @omnitend/dashboard-for-laravel/charts:

npm install chart.js vue-chartjs

import { DXBarChart, DXLineChart, DXDoughnutChart } from '@omnitend/dashboard-for-laravel/charts';

Everything else (the theme stylesheet with the --dx-chart-* palette) comes from the main package as usual — no extra CSS import for charts.

Chart palette

Series colours come from a dedicated data-viz palette, not the semantic UI colours: eight vivid hues published as the CSS variables --dx-chart-1 … --dx-chart-8, assigned to series in a fixed order:

Slot	Colour	Hue
`--dx-chart-1`	`#2563eb`	blue
`--dx-chart-2`	`#65a30d`	lime
`--dx-chart-3`	`#7c3aed`	violet
`--dx-chart-4`	`#0d9488`	teal
`--dx-chart-5`	`#ea580c`	orange
`--dx-chart-6`	`#0891b2`	cyan
`--dx-chart-7`	`#d97706`	amber
`--dx-chart-8`	`#db2777`	pink

Why not --bs-success and friends? Two reasons. The theme’s base colours are dark emphasis shades tuned for text and links, too muted for data series. And status colours carry reserved meaning — a green or red series should signal a good/bad measure, not “series 2”. If a series does mean pass/fail, set its colours explicitly on the dataset.

The order is deliberate: it was chosen to maximise the separation of adjacent series under colour-vision-deficiency simulation, and every hue clears 3:1 contrast on white. Assign series in palette order (the components do this automatically) rather than cherry-picking slots.

The palette cycles after 8: a 9th uncoloured series repeats the first colour. Charts with more than 8 categories should set explicit dataset colours — or better, group the tail into an “Other” category; more than ~8 slices is rarely readable anyway.

To retheme charts, override the variables in your own CSS:

:root {
  --dx-chart-1: #0e7490;
  --dx-chart-2: #a21caf;
  /* ... */
}

Dark mode and nested colour-mode scopes

The palette is resolved from the chart container’s own computed style, not from <html>. So it follows Bootstrap’s colour mode wherever that mode is set: data-bs-theme on the root themes every chart, and data-bs-theme on a single card themes only the charts inside it — a dark panel on a light page charts in the dark palette, and a light panel on a dark page charts in the light one.

The same applies to a variable override: setting --dx-chart-* on a container rethemes only the charts within it.

<div data-bs-theme="dark" class="card p-3">
  <!-- charts here use the dark palette even on a light page -->
</div>

Mounted charts repaint when the colour mode changes — no remount or key bump needed. The components watch data-bs-theme and re-resolve the variables, so a theme toggle updates every visible chart in place.

Optional peer dependencies

Charts require chart.js and vue-chartjs, which are optional peer dependencies — install them only if you use the chart components:

npm install chart.js vue-chartjs

Live Examples

Props

DXBarChart and DXLineChart:

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`labels`	`string[]`	Yes	-	X-axis category labels
`datasets`	`ChartDataset[]`	Yes	-	Chart.js datasets; colours are themed when a dataset omits them
`options`	`object`	No	-	Chart.js options, deep-merged over the themed defaults
`valueFormat`	`'number' \| 'currency' \| 'percent'`	No	-	Format value-axis ticks and tooltips
`currencySymbol`	`string`	No	`'£'`	Currency symbol for valueFormat: "currency"
`locale`	`string`	No	-	Locale for number formatting
`showLegend`	`boolean`	No	`multi-series`	Show the legend (defaults to true when there is more than one dataset)

DXDoughnutChart is the same, minus the value axis, plus a data convenience prop (number[], one value per label) as an alternative to datasets, and showLegend defaults to true.