28 lines
2.8 KiB
Markdown
28 lines
2.8 KiB
Markdown
# Chart
|
|
|
|
`Chart` uses Chart.js 4 through a locally bundled runtime. The package manifest automatically loads it on pages containing a Chart, in development and production. No CDN or additional app configuration is needed.
|
|
|
|
Supported `type` values: `bar`, `line`, `pie`, `doughnut`, `radar`, `polarArea`, `scatter`, and `bubble`. `area` is an alias for a line chart with `fill: true`. Use dataset-level `type` values for mixed charts. Horizontal bars use `options.indexAxis: "y"`; stacking uses the native scale options.
|
|
|
|
Existing `items` or `data` arrays of `{ label, value }` continue to work, including custom `labelKey` and `valueKey`. Negative numbers and zero retain their values; missing or invalid values become null gaps. Scatter and bubble arrays use native `{ x, y }` / `{ x, y, r }` points.
|
|
|
|
For multiple datasets and full Chart.js data structures, pass a native data object:
|
|
|
|
```wrn
|
|
page Analytics {
|
|
state chartData = JSON.parse('{"labels":["Jan","Feb","Mar"],"datasets":[{"label":"Actual","data":[20,35,28]},{"type":"line","label":"Target","data":[25,30,40]}]}')
|
|
state chartOptions = JSON.parse('{"scales":{"y":{"beginAtZero":true}},"plugins":{"legend":{"position":"bottom"}}}')
|
|
view {
|
|
<Chart title="Monthly results" type="bar" data="{chartData}" options="{chartOptions}" showValues="false" height="320" />
|
|
}
|
|
}
|
|
```
|
|
|
|
Alternatively pass `labels` and `datasets` separately. Native data objects take precedence, then separate datasets, then the legacy row array. `options` accepts JSON-serializable Chart.js settings, including scales, tooltips, legend, animations, and interaction modes. Functions and custom plugin objects cannot cross the server/client JSON boundary. Time scales require a date adapter and are not included in the built-in runtime.
|
|
|
|
The chart resizes to its container and uses `height` in CSS pixels. Data and option changes call Chart.js `update`; changing `type` recreates the instance. Removing the component destroys its chart. Reduced motion disables animations by default. Theme changes refresh text and Cartesian grid colors. Chart.js supplies its default dataset palette; native dataset colors override it.
|
|
|
|
`showLegend` sets the default legend visibility; native `options.plugins.legend` settings can override it. `showValues` enables compact labels on bar and line plots with at most 24 points per dataset; other plots expose values through native tooltips. Set it to false for the standard Chart.js appearance. Every chart also provides a screen-reader data table.
|
|
|
|
`@select` and `@dataPointClick` return `{ item, index, datasetIndex, sourceEvent }`. For legacy rows, `item` is the original row; for native datasets, it is the raw data point. `@legendToggle` returns `{ item, index, datasetIndex, hidden, sourceEvent }`. Cartesian legends toggle datasets; pie, doughnut, and polar-area legends toggle data slices, following Chart.js behavior.
|