Sparkline

Мини-графики. Бесплатно, MIT · Графики и аналитика › Динамика

Установка

npx valyro-cli@latest add sparkline

npx shadcn@latest add https://valyro.xyz/r/sparkline.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Sparkline } from 'valyro-ui';

Prop	Type	Default
`data` *	`(number \| null)[]`		Values in order; missing (null / NaN) values leave a gap.
`variant`	`'line' \| 'area' \| 'bar'`	`'line'`	`line`: trend line. `area`: line over a gradient fill. `bar`: one bar per value, growing from zero.
`width`	`number`	`80`	Default 80.
`height`	`number`	`24`	Default 24.
`color`	`string`		Any CSS color. Default: green when the last value is above the first, red when below.
`higherIsBetter`	`boolean`	`true`	False for metrics where a decrease is good (latency, bounce rate): swaps the trend colors. Default true.
`showDot`	`boolean`	`false`	Dot on the last point (line and area).
`curve`	`'linear' \| 'monotone'`	`'monotone'`	`monotone` smooths the line without overshooting the data; `linear` joins points straight. Ignored for bars.
`ariaLabel`	`string`		Accessible name. Without it the sparkline is treated as decorative.