Charts
Thin, themed wrappers around Chart.js via
vue-chartjs: DXBarChart, DXLineChart, and DXDoughnutChart. They apply the
Bootstrap palette (read from the live theme) 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.
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-chartjsLive 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.