Reference
tsx
import { Chart, Heatmap, SeriesLegend, Sparkline, Timeline, createChart, useChart } from '@adecore/charts';Parts
Chart.Root owns the data, the scales, the cursor and the keyboard. Each part inside it draws one layer, in the order of the children: the grid first, then bands, series and markers. Chart.Tooltip, Chart.Legend and Chart.Table take their own places whatever their order.
| Part | Draws |
|---|---|
Chart.Root | The box. Its width follows the container; its height is fixed. |
Chart.Grid | Gridlines on the ticks of the value axis, or of the x axis, or both. |
Chart.XAxis, Chart.YAxis | Ticks and labels. The y axis measures its widest label. |
Chart.GroupAxis | A second row of labels, one per group of columns. |
Chart.Line, Chart.Area | A line, and a line with its area filled. |
Chart.Bars, Chart.Bar | Columns, side by side or stacked. |
Chart.Point | A dot per value; on a scatter the points the cursor moves between. |
Chart.Frontier | A band through the points nothing beats on both axes. |
Chart.EndLabels | A label at the end of each series of a scatter. |
Chart.Marker, Chart.Band | A moment and a range, named in the tooltip. |
Chart.Rule | A line at a value, such as a reference, above the series. |
Chart.Tooltip | The card at the cursor. |
Chart.Legend | The series with their color. |
Chart.Table | A toggle that shows every value as a table. |
Chart.Layer | A group in the plot for a drawing of the app's own. |
Chart.Group | Charts that share one cursor. |
A timeline has parts of its own: Timeline.Root, Timeline.Legend, Timeline.Axis, Timeline.Moment and Timeline.Rows.
Other components
| Component | |
|---|---|
Heatmap | A grid of cells shaded by value, such as events by weekday and hour. |
Sparkline | A small line or row of columns without axes, for a list row or a tile. |
SeriesLegend | A list of many series beside a chart, with search and toggles. It reports what is off; the app decides what hiding means. |
Exports
Every name @adecore/charts exports, read from its source. Anything not listed is internal. The package has no other entry point and no stylesheet.