Zum Hauptinhalt springen

ChartLegend

Die ChartLegend-Komponente zeigt eine einfache Legende für Diagramme an. Die Einträge können horizontal oder vertikal angeordnet werden.

Import

import { ChartLegend } from '@smolitux/charts';

Verwendung

<svg width={200} height={80}>
<ChartLegend
items={[{ label: 'A', color: '#ff0000' }, { label: 'B', color: '#00ff00' }]}
direction="horizontal"
/>
</svg>

Props

PropTypBeschreibung
itemsLegendItem[]Einträge der Legende
direction'horizontal' | 'vertical'Ausrichtung der Einträge
itemSpacingnumberAbstand zwischen den Einträgen
markerSizenumberGröße der Farbmarkierung
classNamestringZusätzliche CSS-Klasse

Barrierefreiheit

Alle Texte der Legende sind innerhalb des SVG lesbar und können von Screenreadern erfasst werden.