Data and identity
Accessor rules, gaps versus zero, category identity, and the server-safe entry.
@lilt-ui/charts/dataCategoryXConfigsummarizeRangetoChartCsv
Time accessors return a Date or epoch milliseconds. Numeric accessors return finite numbers. Y values can be finite or null; null is a gap and zero is data. Time and numeric x values must be unique and strictly ascending.
A category x keeps identity and label apart. accessor returns each row's identity, which must be stable and unique, and format turns an identity into the label shown on the axis and in readouts. Labels may repeat; identities may not. When several buckets fall on one date, key them by index and label them by date, so every bucket stays its own observation:
Two rows with the same identity stop the chart with a specific error, such as Invalid category at row 5: duplicate ID "Oct 3"., rather than silently merging buckets. When rows are moments in time, prefer { type: 'time' }: spacing then follows real time, and compare, focus, live and brush become available. Category x suits buckets you name yourself.
Import summarizeRange, toChartCsv and summarizeFunnelStages from @lilt-ui/charts/data when calling them in a Server Component. Interactive charts come from @lilt-ui/charts in a client component.
TypeScript
// 24 buckets over a week: four share each date label.
<Chart
aria-label="Alarm activity"
data={buckets}
series={series}
x={{
type: 'category',
accessor: (row) => String(row.index), // identity: 0 … 23
format: (id) => buckets[Number(id)]?.label ?? '', // label: "Oct 3"
}}
>