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 variables: eight light, vivid fills published as the CSS variables --dx-chart-1 … --dx-chart-8, each with a darker line shade (--dx-chart-line-1 … --dx-chart-line-8), assigned to series in a fixed order, plus one edge colour, --dx-chart-edge (#121419):

Slot	Fill	Line shade	Hue
1	`#7fd7fd`	`#5590aa`	sky
2	`#7bf25a`	`#4d9839`	lime
3	`#e46ab9`	`#d161a9`	magenta
4	`#d6e86a`	`#848f41`	lime-yellow
5	`#b9a3f0`	`#907fbb`	lavender
6	`#efd574`	`#99884a`	butter
7	`#9fb4ff`	`#7686be`	periwinkle
8	`#f7a072`	`#ba7956`	peach

How the components use them, for any property a dataset leaves unset:

Bars and doughnut segments are filled with the slot colour and outlined with a 1px --dx-chart-edge.
Lines are stroked in the slot’s line shade, with fill-coloured points outlined in the line shade and a 35% fill wash under the line.

The fills are light (1.35–2.97:1 on white), so they don’t carry the 3:1 non-text contrast WCAG asks of chart marks on their own. The edge and the line shades do: the edge is 18.42:1 on white, and each line shade is its fill darkened to 3.5:1.

The fills share their hues with the theme’s status colours, but charts never read --bs-success and friends, so retuning a status colour doesn’t move a series. 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 (minimum adjacent ΔE 19.6 for the fills and 13.7 for the line shades, OKLab ×100 with protan/deutan simulation). 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-line-1: #0b5566;
  --dx-chart-2: #a21caf;
  --dx-chart-line-2: #7a1584;
  /* ... */
  --dx-chart-edge: #1f2937;
}

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. In dark mode the line shades are the dark fills themselves and the edge is the dark body colour, so a bar’s outline disappears into the page.

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.