Where the legend lives
ECharts' legend block accepts orient (horizontal / vertical)
and a 2-axis position (left, right,
top, bottom). Names come from
series[].name.
Horizontal — top (default)
Vertical — left
Click to toggle
Default behaviour — click a legend item to hide its series. To make a series un-hideable, set
selectedMode: false on the legend. To start with a series hidden, set
selected: legend: { selected: { '2024': false } }.
No legend at all
For sparklines and single-series visualisations skip the legend entirely — omit the
legend block from the option. See Sparkline for
an example.
Interactive legend
Set emphasis: { focus: 'series' } on each series and hovering a legend item lights
up that series while fading the rest — no JavaScript, ECharts links legend hover to series emphasis by default.
Legend tooltips
Long series names get truncated in the legend row. Turn on
legend: { tooltip: { show: true } } and hovering a legend label shows the full name in a
tooltip.
Reacting to legend toggles
phaChart forwards every legend toggle as a
chart-legend-select DOM event ({ name, selected } in
$event.detail). Listen on a wrapper element to drive a filter, a URL, or — here — a
status line. Click any legend item:
Standalone legend
When several charts on a dashboard share one colour mapping, render a single legend once — as plain PatternFly markup — instead of repeating it per chart. It carries no chart wiring; the swatch colours are the PF chart palette in series order.