Chart

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/chart.json

Użycie#

Wykres to Recharts wewnątrz ChartContainer. Kontener przyjmuje config, który nazywa każdą serię i przypisuje jej kolor; kolor każdej serii staje się zmienną CSS --color-<key> o zasięgu ograniczonym do tego wykresu.

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

const config = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={config} className="aspect-auto h-64 w-full">
  <AreaChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <Area
      dataKey="visitors"
      stroke="var(--color-visitors)"
      strokeWidth={2}
      fill="var(--color-visitors)"
      fillOpacity={0.1}
    />
  </AreaChart>
</ChartContainer>

Nadaj kontenerowi jawną wysokość, która mieści etykiety osi — aspect-auto h-64 — żeby osie nigdy nie zostały przycięte ani nie trafiły do zagnieżdżonego obszaru przewijania.

Przykłady#

Warstwowy#

Jedna seria opowiada jedną historię, więc nie potrzebuje legendy — nazywa ją tytuł. Narysuj linię o grubości 2 px, a pod nią wypełnienie tym samym kolorem z kryciem 10% — spokojne tło, nigdy pełna plama koloru.

Liniowy#

Przy dwóch lub więcej seriach legenda jest zawsze widoczna. Podpisz koniec każdej linii jej ostatnią wartością, zamiast umieszczać liczbę przy każdym punkcie.

Słupkowy#

Słupki mają najwyżej 24 px grubości, wyrastają z jednej linii bazowej i są zaokrąglone tylko na końcu z danymi (4 px). Stykające się słupki rozdziela przerwa 2 px.

Skumulowany#

Do porównań części z całością w wielu kategoriach używaj poziomych słupków skumulowanych. Segmenty rozdziela 2-pikselowa linia w kolorze powierzchni — oddziela je przerwa, a nie obrys.

Pierścieniowy#

Wykres pierścieniowy na pierwszy rzut oka pokazuje udział części w całości — przy najwyżej sześciu segmentach. Do porównywania zbliżonych wartości użyj wykresu słupkowego — kąty trudno porównywać.

Statystyka z wykresem przebiegu#

Często najlepszym wykresem jest po prostu liczba. Kafelek statystyki zaczyna od wartości, podaje zmianę względem nazwanego okresu i dodaje 12-punktowy wykres przebiegu (sparkline): historię w spokojnej szarości, bieżący okres w kolorze akcentu. Pokoloruj zmianę zależnie od tego, czy to dobra wiadomość, i dodaj do niej strzałkę, żeby kierunek nigdy nie zależał od koloru.

Wyróżnienie#

Gdy chodzi o jedną serię, powiedz to wprost: pokaż ją w kolorze akcentu, a całą resztę na szaro. To najbardziej niedoceniana forma wykresu i często uczciwa odpowiedź na prośbę „zrób ten wykres czytelniejszym”.

Z widokiem tabeli#

Każdy wykres powinien mieć bliźniaczą tabelę. To najbardziej dostępna postać danych, to z niej kopiuje się liczby, a wartości można w niej odczytać bez najeżdżania kursorem.

Kolor#

O kolorze decydujesz na końcu: najpierw wybierz formę, a potem daj każdemu kolorowi dokładnie jedno zadanie.

Paleta kategorialna#

Kolejność — kolor marki, morski, fiolet, pomarańcz, róż — nie wynika z estetyki. Wybrano ją, sprawdzając wszystkie możliwe kolejności i zostawiając tę, w której różnica kolorów między sąsiadami jest największa przy symulowanej protanopii i deuteranopii. Każdy kolor mieści się też w czytelnym zakresie jasności, przekracza minimalne nasycenie i zachowuje kontrast co najmniej 3:1 z powierzchnią wykresu — w obu trybach:

Wynikają z tego zasady:

• Przypisuj po kolei, bez pomijania i bez zapętlania. Pierwsza seria to zawsze chart-1. Szósta seria trafia do kategorii Inne, na osobny mały wykres (small multiples) albo do tabeli — nigdy nie dostaje wygenerowanego szóstego odcienia.
• Kolor należy do obiektu, a nie do jego pozycji. Gdy filtr usuwa serię, pozostałe zachowują swoje kolory.
• Wykresy punktowe i mapy mają najwyżej trzy serie — tam dowolne dwa kolory mogą znaleźć się obok siebie.
• Kolory statusów są zarezerwowane. Zieleń i czerwień oznaczają w całym prfct „dobrze” i „źle”; nigdy nie używaj ich dla „serii 4”.

Wytyczne#

Najpierw wybierz formę#

Stonowana oprawa#

Tylko dane mają prawo być głośne. Linie siatki są ciągłe i cienkie, o jeden stopień skali różne od powierzchni — nigdy przerywane. Etykiety osi używają muted-foreground. Usuń linie osi i kreski podziałki, a wartości na osiach niech będą okrągłymi liczbami z separatorem tysięcy.

Jedna oś#

Nigdy nie pokazuj dwóch miar na dwóch osiach Y: wzajemne dopasowanie skal jest arbitralne, więc wykres zmyśla korelacje. Użyj dwóch wykresów, małych wykresów obok siebie albo przelicz obie serie na indeks równy 100 w punkcie startowym.

Etykiety i legendy#

• Przy dwóch lub więcej seriach legenda jest zawsze widoczna; pojedynczą serię nazywa tytuł.
• Podpisuj wybiórczo — ostatnią wartość, wartość skrajną, tę jedną serię, o której opowiada wykres. Nigdy liczby przy każdym punkcie.
• Tekst używa tokenów tekstu. Wartości, etykiety i legendy pozostają w foreground lub muted-foreground; o tożsamości serii mówi kolorowy znacznik obok nich.

Dostępność#

• Klawiatura. Warstwa dostępności Recharts jest domyślnie włączona: przejdź na wykres klawiszem Tab i poruszaj się między punktami danych strzałkami; podpowiedź podąża za fokusem dokładnie tak jak za kursorem.
• Alternatywa tekstowa. Dołącz do każdego wykresu widok tabeli albo opisz główny wniosek w tytule i podpisie — „Liczba rejestracji wzrosła o 64% od kwietnia” mówi więcej niż „Rejestracje według miesięcy”.
• Nigdy sam kolor. Serie identyfikują legendy i bezpośrednie etykiety; zmiany statusu łączą kolor z ikoną i słowami.
• Kontrast. Każdy kolor kategorialny zachowuje w obu trybach kontrast co najmniej 3:1 z powierzchnią wykresu.
• Ruch. Animacje Recharts mają domyślnie wartość "auto", która respektuje prefers-reduced-motion. Nie zmieniaj tego.

Dokumentacja API#

ChartContainer#

Opakowuje wykres Recharts, ogranicza zasięg jego kolorów i sprawia, że jest responsywny. Przyjmuje wszystkie propsy div.

ChartConfig#

type ChartConfig = Record<
  string,
  {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string } // one color for both modes
    | { theme: { light: string; dark: string } } // a color per mode
  )
>

ChartTooltipContent#

Używaj w ten sposób: <ChartTooltip content={<ChartTooltipContent />} />.

ChartLegendContent#

Używaj w ten sposób: <ChartLegend content={<ChartLegendContent />} />.

ChartStyle#

Wstrzykiwany przez ChartContainer; eksportowany na potrzeby własnych kontenerów, które potrzebują tych samych zmiennych kolorów o ograniczonym zasięgu.