Live demo — this example is server-driven; run the showcase locally for the interactive version.

Colors for charts

How the PatternFly chart palette is structured and how to override it for semantic colour.

The palette

Every chart inherits the PatternFly v6 multi-colored (ordered) scale — 25 colours cycling the blue / green / teal / yellow / orange families through their 300 → 100/500 → 200/400 shades — via the registered patternfly ECharts theme (see /web/js/alpine/components/chart.js). Use it in series order — the first series gets the first colour, the second gets the second, and so on.

#0066cc · blue-300

#63993d · green-300

#37a3a3 · teal-300

#dca614 · yellow-300

#ca6c0f · orange-300

#92c5f9 · blue-100

#204d00 · green-500

#9ad8d8 · teal-100

#96640f · yellow-500

#f8ae54 · orange-100

#003366 · blue-500

#afdc8f · green-100

#004d4d · teal-500

#ffe072 · yellow-100

#732e00 · orange-500

#4394e5 · blue-200

#3d7317 · green-400

#63bdbd · teal-200

#b98412 · yellow-400

#f5921b · orange-200

#004d99 · blue-400

#87bb62 · green-200

#147878 · teal-400

#ffcc17 · yellow-200

#9e4a06 · orange-400

In a chart

A bar chart with seven series picks up the first seven colours automatically — no per-series itemStyle needed.

Unordered palette

When series have no inherent order (typical for area and line charts), PatternFly recommends the multi-colored (unordered) scale: it adds purple and gray and interleaves the hue families so adjacent series contrast strongly. It ships as PF_COLORS_UNORDERED in chart.js — opt in per chart with option.color.

Single-hue scale

For a chart whose series form a progression (this quarter vs. last vs. the one before), use one hue family in shade order. The PF green family, darkest series first:

Custom colour scale

Pass any explicit array as option.color to bypass the palette entirely — line stroke, area fill, legend chip and tooltip marker all follow it, so there is no separate stroke override to keep in sync.

Overriding

For semantic colour (status, severity), bypass the palette and assign per-series itemStyle.color directly. PF status tokens: danger #b1380b, warning #ffcc17, success #63993d.