2.8 KiB
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:
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.