Chart Series Colors Editor

ProNew

Set one color per chart series, with a swatch picker for each, an automatic suggestion that spreads hues evenly, and a check that flags series whose colors are too close to each other or too faint against the background. Use this when charts get custom colors.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

background

Guide and examples

When to use it

Dashboards let people choose the color of each line, bar or slice.

Do not use it when: If your charts use a fixed, tested palette, do not make people pick.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`series`	`string[]`	four samples	Series names.
`background`	`string`	`#ffffff`	The chart background, for the visibility check.
`onChange`	`(colors: Record<string, string>) => void`	-	Series name to hex.

suggestColors(count) and checkSeries(series, background) are exported.

Accessibility

Each series row has the series name and a picker button named "Revenue color: #e11d48", so the control and the current value are both spoken. The picker is the full Color Picker Panel with keyboard-operable area, sliders and hex field.
Problems are listed in plain sentences naming the series ("Revenue and Costs are too similar") in an alert; a clean set is a status.
Even with distinct colors, add direct labels, markers or patterns in the chart itself: color should not be the only way to tell series apart.

Testing

The pattern ships with a Testing Library test (chart-series-colors-editor.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.