ChartLegend and ChartTooltip

Legenda i odczyt punktu, których używa każdy wykres tutaj, dla własnego wykresu, który ma wyglądać tak samo. Wybierz ChartLegend zawsze, gdy kolor oznacza więcej niż jedną rzecz.

ChartLegend
ChartTooltip

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: ChartLegend and ChartTooltip

Visits
Sign-ups
Returns
Referrals
Previous period
Spike

62%Desktop(18,204)
33%Mobile(9,871)
5%Other(1,417)

14 March 2026

Version 2.4 released

Visits1,602
Previous 28 days1,311

Noc, podgląd: ChartLegend and ChartTooltip

Visits
Sign-ups
Returns
Referrals
Previous period
Spike

62%Desktop(18,204)
33%Mobile(9,871)
5%Other(1,417)

14 March 2026

Version 2.4 released

Visits1,602
Previous 28 days1,311

Wysoki kontrast, podgląd: ChartLegend and ChartTooltip

Visits
Sign-ups
Returns
Referrals
Previous period
Spike

62%Desktop(18,204)
33%Mobile(9,871)
5%Other(1,417)

14 March 2026

Version 2.4 released

Visits1,602
Previous 28 days1,311

UżycieLink do sekcji Użycie

tsx

import { ChartLegend, ChartTooltip } from '@skribly/ui/charts'

tsx

<ChartLegend
  label="Series"
  items={[
    { id: 'visits', label: 'Visits', color: 1, shape: 'line' },
    { id: 'previous', label: 'Previous period', color: 'muted', shape: 'line', pattern: 'short' }
  ]}
/>
<ChartTooltip title="14 March 2026" items={[{ id: 'visits', label: 'Visits', value: '1,602', color: 1, shape: 'line' }]} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Legenda jest listą nazwaną przez label; każda próbka koloru jest ukryta, a nazwa jest tekstem.
Próbki linii mają ten sam wzór kreski co ich linia, więc pasują bez koloru.
Dymek nigdy nie przejmuje wskaźnika, zostaje w polu przy jego krawędziach i zawija długi tekst.
Wewnątrz wykresu jest ukryty przed czytnikami ekranu, bo te same słowa są odczytywane przez region na żywo; samodzielnie jest zwykłym tekstem.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.