ChartLegend and ChartTooltip
The key and the point readout every chart here uses, for a custom chart that should look the same. Pick ChartLegend whenever colour stands for more than one thing.
- ChartLegend
- ChartTooltip
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ChartLegend and ChartTooltip
- Visits
- Sign-ups
- Returns
- Referrals
- Previous period
- Spike
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 5%Other(1,417)
14 March 2026
Version 2.4 released
- Visits1,602
- Previous 28 days1,311
Dark theme, ChartLegend and ChartTooltip
- Visits
- Sign-ups
- Returns
- Referrals
- Previous period
- Spike
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 5%Other(1,417)
14 March 2026
Version 2.4 released
- Visits1,602
- Previous 28 days1,311
High contrast theme, ChartLegend and ChartTooltip
- Visits
- Sign-ups
- Returns
- Referrals
- Previous period
- Spike
- 62%Desktop(18,204)
- 33%Mobile(9,871)
- 5%Other(1,417)
14 March 2026
Version 2.4 released
- Visits1,602
- Previous 28 days1,311
UsageLink to the section Usage
import { ChartLegend, ChartTooltip } from '@skribly/ui/charts'<ChartLegend
label="Series"
items={[
{ id: 'visits', label: 'Visits', color: 1, shape: 'line' },
{ id: 'previous', label: 'Previous period', color: 'muted', shape: 'line', pattern: 'short' }
]}
/>
<ChartTooltip title="14 March 2026" items={[{ id: 'visits', label: 'Visits', value: '1,602', color: 1, shape: 'line' }]} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The legend is a list named by label; each swatch is hidden and the name is text.
- Line swatches carry the same dash pattern as their line, so they match without colour.
- The tooltip never takes the pointer, keeps to the box near its edges and wraps long text.
- Inside a chart it is hidden from screen readers, because the same words are read through the live region; on its own it is plain text.
This demo runs through axe in all three themes on every test run. See what the tests check.