Appearance
Series descriptors for color, line, area and bar marks, and --lilt-* tokens.
ChartSeriesGrid--lilt-*
Lilt starts with finished light and dark styles. A series descriptor controls its color, line, area and bar marks. The same settings apply to the resting mark and its inspection highlight. ChartPlot bars controls width, group gap and stacked segment gap; stacked bars are connected and square by default. Use a root style or className with --lilt-* tokens for axes, grid, tooltip, legend, brush and other surfaces.
For a separated stack, use bars={{ segmentGap: 3 }} and set each series's bar.radius. Cards take palette and surface, and expose their parts through root tokens and stable CSS classes. See Customize for every look.
Hover inspection marks every visible line or area by default. To hide one series's marker while keeping its tooltip value and line, set line: { showInspectionPoint: false } on that series. Its point radius, stroke and stroke width use the same line settings as isolated observations.
TypeScript
const series: ChartSeries<Day>[] = [{
id: 'revenue', label: 'Revenue', accessor: row => row.revenue,
color: '#168267',
line: { width: 2.5, pointRadius: 3 },
area: { opacity: 0.48 },
bar: { radius: 0, stroke: '#0f513e', strokeWidth: 1 },
}];
<Chart aria-label="Revenue" data={rows} x={x} series={series}
style={{ '--lilt-grid-dot-opacity': 0.12, '--lilt-tooltip-radius': '8px' }}>
<ChartPlot bars={{ width: 18, gap: 4 }} tooltip={<Tooltip />}>
<Grid pattern="dots" dotSpacing={9} dotRadius={0.7} />
<Bar series="revenue" /><XAxis /><YAxis showTicks={false} />
</ChartPlot>
</Chart>