ChartLegend
The color key for a chart's series.
<template> <ChartLegend v-model:highlighted="highlighted" :items="[ { key: 'pr', label: 'PR review', color: 'var(--color-chart-chart-2)', total: '42' }, { key: 'whitebox', label: 'Whitebox scan', color: 'var(--color-chart-chart-3)', total: '11' }, ]" /></template>Props
| Name | Type | Default |
|---|---|---|
| items | ChartLegendItem[] | - |
| highlighted | string | null | null |
| isLoading | boolean | false |
Guidelines
Do
- Let TrendChart render it for you by default - reach for it directly only to place the legend somewhere else, such as a Card's
#header-actionsbeside the title, with:show-legend="false"on the chart. - Bind the same ref to TrendChart's
v-model:highlighted-seriesand this component'sv-model:highlightedso hovering, focusing or clicking a legend item dims the other series in the plot. - Pass
totalalready formatted (toLocaleString(), a percent formatter) - this component only prints it.
Don't
- Don't pass items in a different order from the chart's series unless the order itself carries meaning (severity, highest first) - a reader matches swatch colors against the plot.
- Don't use it as a general color key for non-chart content - that is a plain flex row, not a legend.