Line · ordered change
Use lines to show change over a sequence.
<cad-chart> + <cad-chart-item>
Chart
Compare values with bars, follow changes with lines, or show proportions with a donut. Each chart includes an accessible data table.
Notes reviewed
Use bars to compare values.
Chart types
All types use the same data format.
Donut · part to whole
Use a donut for a few parts of a meaningful total.
Import
Import @caderno-ui/elements/chart, or its React or Astro adapter. Charts and Rough.js are not included in the elements root import.
Animation
Charts animate when they enter the viewport or their data changes. Call replay() to repeat, or set animation="none" to disable. Reduced-motion preferences are respected.
API reference: <cad-chart>
API reference: <cad-chart-item>
Data and labels
Keep labels short and add units with value-label. Negative values are clamped to zero.
Accessibility
A native table exposes the chart data to assistive technology. The SVG is decorative, and item text stays readable before JavaScript loads.