Skip to main content
Chart is a namespace, not a renderable component. Use Chart.Line. There is no mode, because area charts do not exist. Attio picks the drawing from the data: points with no seriesId draw as one line, and points that carry one draw as a line each, with a legend. A single-series line chart draws no legend. x is a category, the same as it is on a bar chart. Send ISO date strings rather than timestamps, and format them with xAxis.format. See Using charts for height tokens, color tokens, format, and the empty and error states.

Example

TypeScript

Props

Array<ChartDatum>
required
The points to plot. Each point is {x, y, seriesId?}. x is a category or position: an ISO date string or a number, never a Date.
Array<ChartSeries>
Names, colors, and orders the series ids used in data. Each entry is {id, label, color?}.Listing a series is optional, and listing an id that no point uses is ignored. The array’s order is the order of the legend. Ids missing from it follow, in order of first appearance in data.A single-series chart takes its color and its tooltip label from the first entry, and ignores that entry’s id.
ChartAxis
The category axis. {label?, format?, currency?}. format and currency follow the shared format rules.
ChartAxis
The value axis. {label?, format?, currency?}. format="currency" needs a sibling currency code.
string
A caption above the chart.
'small' | 'medium' | 'large' | 'extraLarge'
The height of the whole chart, including title and legend.Defaults to "medium" (240px). See Using charts.