Sparkline

A micro-chart with no axes and no labels: the shape carries the trend, the number next to it carries the value. The last point is the current value.

When to use

Inline trend context next to a number - inside a KPI card or a table cell.

Example

import { Sparkline } from "ibcs-react";

<Sparkline data={[3, 5, 4, 6, 5, 7, 8]} type="line" />
<Sparkline data={series} type="area" color="#5e8c22" />

KpiCard draws its own sparkline (sparkline + sparklineType), so reach for this component directly when you need the micro-chart somewhere else - a table cell, a list row, next to a headline in prose.

Props