Iryx UICharts
IChartLegend
The legend IBarChart and ILineChart draw for themselves, available on its own to place beside a title, in a card header, or above two charts that share a scale.
- North
- South
- East
A series without a name is labelled by its key, so the shape you already pass to a chart works here unchanged.
- north
- south
- east
Colour follows the entity
A series takes its colour from its position in the array unless you pin it with slot. Pin every series that can be filtered in and out, so its colour survives the ones around it disappearing.
- North
- South
- East
- South
- East
The palette defines eight categorical slots, and repeats beyond that.
Highlighting one
active is the index of the highlighted entry, and dims the rest. Drive it from your own hover handling.
- North
- South
- East
Beside a chart
A chart with two or more series draws its own legend, so pass :legend="false" before placing one yourself — otherwise the page shows two.
Revenue by quarter
- North
- South
- East
- North
- South
- East
| Category | North | South | East |
|---|---|---|---|
| Q1 | €18,200 | €12,400 | €9,100 |
| Q2 | €22,600 | €15,100 | €11,800 |
| Q3 | €20,100 | €17,400 | €14,200 |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | ChartSeries[] | — | Entries to label. Required |
active | number | — | Index to highlight; the rest are dimmed |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, item?, swatch?, name? } | — | Per-slot class overrides |
interface ChartSeries {
key: string
name?: string
slot?: number
}