---
title: "Grafy na dashboardu bez jediné závislosti"
description: "Trendové křivky, sparkliny i pruhy kategorií na našem dashboardu jsou obyčejné inline SVG. Žádná knihovna na grafy, dohromady pár set řádků a tmavý režim zadarmo. Proč se vyplatí psát grafy ručně a kdy to naopak rozhodně nedělat."
url: "https://bookatu.com/cs-cz/blog/dashboard-charts-with-zero-dependencies"
language: "cs"
section: "Blog"
category: "Technika"
author: "Technický tým Bookatu"
published: "2026-07-11"
updated: "2026-07-11"
tags: ["svg grafy", "grafy bez knihovny", "grafy v tmavém režimu", "výkon frontendu", "vizualizace dat"]
---

# Grafy na dashboardu bez jediné závislosti

Trendové křivky, sparkliny i pruhy kategorií na našem dashboardu jsou obyčejné inline SVG. Žádná knihovna na grafy, dohromady pár set řádků a tmavý režim zadarmo. Proč se vyplatí psát grafy ručně a kdy to naopak rozhodně nedělat.

> **Ve zkratce**
>
> - Grafy na dashboardu jsou většinou pár tvarů: čára, plocha, několik pruhů. To je pár desítek SVG prvků, ne knihovna.
> - Když tahy a výplně obarvíte CSS proměnnými, grafy automaticky drží krok s vaším motivem včetně tmavého režimu.
> - Každý stav máte ve vlastních rukou: prázdno, jediný datový bod, omezený pohyb, čtečky obrazovky.
> - Po knihovně sáhněte, když potřebujete interaktivitu, škály nebo typy grafů, které byste jinak vynalezli špatně.

Když jsme přidávali skladový dashboard, nabízelo se nainstalovat knihovnu na grafy. Ty populární jsou výborné. Jsou také velké, mají vlastní představu o motivech a jsou stavěné na tisíc případů, zatímco my jsme potřebovali čtyři: trendovou křivku o dvou řadách, sparklinu na řádek, pruh se stavem zásob a rozpad podle kategorií. Napsali jsme je jako inline SVG a celá sada vyšla menší než definice typů u většiny knihoven.

![Skladový dashboard s trendovým grafem, rozpadem podle kategorií a žebříčkem ve světlém motivu](https://bookatu.com/blog/shots/inventory-control-center-light.png)

*Čtyři ručně psané grafy: trendové křivky, segmentovaný pruh kategorií, seřazené hodnotové pruhy a sparkliny na řádek.*

## Graf je jen jedna cesta

Odeberte nástroje a z čárového grafu zbude jeden řetězec: SVG path poskládaná z vašich hodnot. Index každého bodu namapujte na x, každou hodnotu na y a spojte je. Jediná jemnost, kterou stojí za to si zapsat, je odsazení: maximum mapujte pár pixelů pod horní hranu, jinak vám viewBox rozřízne tah ve vrcholu napůl.

```js
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clipped
const max = Math.max(1, ...values);
const x = (i) => (i / (values.length - 1)) * W;
const y = (v) => PAD + (H - PAD) * (1 - v / max);

const d = values
  .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`)
  .join(' ');

// <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />
```

## Tmavý režim nestojí nic

Tichá výhra jsou motivy. Naše design tokeny jsou CSS proměnné a SVG tahy i výplně je berou jako každou jinou vlastnost. stroke="var(--color-primary)" znamená, že se graf přebarví ve chvíli, kdy se přepne motiv, bez konfigurace motivu na úrovni grafu, bez zdvojené palety a bez rozjíždění mezi grafy a zbytkem rozhraní. Když jsme později ladili tmavou paletu, grafy šly s ní, aniž bychom se jich dotkli.

![Stejný skladový dashboard vykreslený v tmavém motivu](https://bookatu.com/blog/shots/inventory-control-center-dark.png)

*Stejné komponenty v tmavém režimu. Žádný graf jsme neupravovali, práci odvedly CSS proměnné.*

## Okrajové případy jsou vaše

Knihovny jsou štědré na funkce a skoupé na okrajové případy, které máte jen vy. Co má sparklina udělat s jediným datovým bodem? Co řekne trendový graf podniku, který právě začal a všechny hodnoty má nulové? Ručně psané komponenty dělají tahle rozhodnutí viditelná a levná: poctivý prázdný stav s jednou větou, rovná čára místo pádu, textové shrnutí vedle každého grafu pro čtečky obrazovky a jediný media dotaz prefers-reduced-motion, který vypne vykreslovací animaci.

- Dejte každému grafu aria-label a shrnutí běžnou řečí. SVG je ozdoba, data jsou v té větě.
- Tahy animujte pomocí stroke-dashoffset, ať se graf jakoby kreslí, a schovejte to za prefers-reduced-motion.
- Nechte matematiku a značkování pohromadě. Komponentu grafu, kterou přečtete odshora dolů na jedné obrazovce, spravíte i v 11 večer.
- Prázdný stav navrhněte jako první. Nové účty ho vidí častěji než kterýkoli jiný.

## Kdy knihovnu použít

Psát grafy ručně přestane být chytré ve chvíli, kdy požadavkům narostou zuby. Zoom a výběr rozsahu, logaritmické škály, skládané plochy se správnou interpolací, osy s chytrým rozmístěním popisků, vykreslování do canvasu pro desítky tisíc bodů: to jsou vyřešené problémy a řešit je znovu ručně je cesta, jak z dvoudenní funkce udělat dvouměsíční koníček. Naše pravidlo je jednoduché. Když je graf prezentace, napište SVG. Když je graf nástroj, který uživatel ovládá, vezměte závislost a buďte rádi, že ji někdo udržuje.

> Nejlepší knihovnou na čtyři malé grafy se ukázal být cyklus for.