Mushilu-San UI Chart
A bar, line, pie or doughnut chart drawn from a data set, with an accessible name.
Selector: mui-chart
import { Chart } from '@mushilu-san/ui/data-display';Loading example…
Overview
type picks the chart kind, and data and options are passed through to it.
role="figure" named by label. The drawing itself is not readable by screen readers, so show the key numbers in text or a table next to it.
When to use
Showing a trend or a comparison across a few categories or dates. A summary view where the shape of the data matters more than exact values.
When not to use
Exact values that users need to read or compare. Use a table. Use Table instead.
Guidelines
Do
Give every chart a labelthat says what it shows and the period.Use colour plus a legend or labels, not colour alone.
Don't
Do not use a pie chart for more than about five slices. Do not truncate the value axis of a bar chart.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | figure | aria-label from label. |
Provide the same numbers in a table or text summary below the chart.
API
Chart
| Name | Type | Default | Description |
|---|---|---|---|
type | 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar' | 'bar' | Chart kind: `bar`, `line`, `pie`, `doughnut`, and other Chart.js types. Default `bar`. |
data | ChartData<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown> | — | Data set in the Chart.js format: `labels` and `datasets`. |
options | PortableChartOptions | — | Chart.js options passed through to the chart. |
label | string | 'Chart' | Accessible name of the figure, describing what is shown. Default `Chart`. |
CSS parts
::part(canvas)::part(root)
Tokens
--mui-color-primary--mui-color-success--mui-color-warning--mui-color-danger--mui-color-text-muted