MiniChart

Čistý sparkline sparkline bez os a popisků — varianty line / area / bar, 9 barev, libovolná výška

Installation

pnpm dlx shadcn@latest add https://registry.ceskysoftware.cz/r/mini-chart.json

Usage

Preview

Dashboard KPI karty

Příjmy+12.5%

$45,231

Uživatelé+5.2%

2,340

Konverze-0.4%

3.8%

Objednávky+8.1%

841

Varianty

line

area

bar

Barvy

primary

secondary

blue

green

red

orange

yellow

grey

dark

S tečkou posledního bodu

Import

import { MiniChart } from "@/registry/cs/ui/mini-chart/mini-chart"

Example

// Základní sparkline (bez os, bez popisků) <MiniChart data={[12, 18, 8, 24, 16, 30, 22, 28]} /> // Varianty: line | area | bar <MiniChart data={data} variant="area" /> <MiniChart data={data} variant="bar" /> // Barvy: primary | secondary | blue | green | red | orange | yellow | grey | dark <MiniChart data={data} color="green" /> // Výška (px, výchozí 40) <MiniChart data={data} height={60} /> // Tloušťka čáry <MiniChart data={data} strokeWidth={2} /> // Zobrazit tečku posledního bodu <MiniChart data={data} showLastDot /> // Kompletní příklad v kartě <div className="flex items-center justify-between"> <span className="text-2xl font-bold">$45,231</span> <MiniChart data={[12, 18, 8, 24, 16, 30, 22, 38]} variant="area" color="primary" height={48} showLastDot /> </div>

Dependencies

https://registry.ceskysoftware.cz/r/utils.json (registry)