Why patterns
Series fills should not rely on colour alone — a chart printed in black-and-white, or seen by a user with strong colour-vision deficiency, has to remain readable. The standard mitigation is to combine colour with a hatch pattern: each series gets a distinct stroke direction or dot density on top of its colour.
In ECharts
Use the itemStyle.decal field on a series. Each decal is a small repeating pattern —
{ symbol: 'rect', dashArrayX: [4, 4], dashArrayY: [2, 2], rotation: Math.PI/4 } —
composited over the series colour. The
ECharts decal handbook
has the full schema.
Setting aria.decal.show: true tells ECharts to auto-assign decal patterns from a default
cycle, matched to the series colour cycle. Each series gets a different pattern without per-series config — this is
the lowest-friction win.
Patterns on a pie
The same aria.decal.show flag decals a pie's slices — each slice becomes distinguishable
by fill as well as colour, which matters most on a pie where slices touch.
Patterns on grouped bars
Decals also carry through side-by-side (non-stacked) bars, so year-over-year comparisons stay readable in print.
Per-series control
Global aria.decal patterns every series. To pattern only some series — say, to
flag the projected columns while measured ones stay solid — set itemStyle.decal per
series and leave aria.decal off. Here "Projected" is hatched, "Actual" is solid.
Custom decal shapes
A decal is fully configurable — symbol (rect / circle / triangle or an SVG path),
dashArrayX / dashArrayY for the dash rhythm, and
rotation. Three hand-built decals:
The default decal cycle
With aria.decal.show on and no per-series overrides, ECharts walks a built-in cycle of
patterns. This eight-series chart shows the full rotation — handy as a reference for which pattern maps to which
series index.
Threshold bands
On a utilization donut the threshold bands carry meaning (OK / warning / danger), so they are the most important place to add a non-colour cue. Decal the band ring and the state reads without relying on the red/orange/green alone.