KPI Chart
The KPI Chart React component displays a key performance indicator value with an optional trend indicator, label, and icon. Ideal for dashboards and summary views.
The KPI Chart component is used to display a single metric value alongside an optional trend indicator showing direction and percentage change.
Usage
import { KPIChart } from "@sparrowengg/twigs-charts";
const Chart = () => {
return (
<KPIChart
value={2953}
title="New conversations"
/>
);
};Props
| Prop | Type | Default |
|---|---|---|
onClick? | () => void | - |
width? | number | string | "100%" |
trend? | KPITrend | - |
valueFormatter? | (value: number | string) => string | - |
suffix? | string | - |
prefix? | string | - |
icon? | ReactNode | - |
title | string | - |
value | number | string | - |
KPITrend Props
| Prop | Type | Default |
|---|---|---|
tooltipContent? | ReactNode | - |
showTooltip? | boolean | true |
label? | ReactNode | - |
status? | "positive" | "negative" | "neutral" | - |
direction | "up" | "down" | "neutral" | - |
percentage | number | - |
Examples
With Trend
Negative Trend
Neutral Trend
With Icon
With Prefix
With Value Formatter
Use valueFormatter to fully control how the displayed value is formatted — for example, to abbreviate large numbers.
When valueFormatter is provided, prefix and suffix are ignored. The formatter's return value is used as-is. If you need a currency symbol or unit alongside a custom format, include it directly in the formatter function.
Custom Tooltip
Pass tooltipContent to fully control the tooltip text shown on hover.
Heatmap
The Heatmap React component displays high-density data using a color-coded grid, making patterns and correlations easy to spot. Fully customizable and responsive, it's ideal for analytics and performance monitoring.
Line Chart
The LineChart React component renders smooth, responsive line charts to track trends over time. It supports multiple data series, tooltips, and interactive features for clear and dynamic data visualization.