Bar Chart

Area ChartDonut Chart

Compare values across categories, grouped or stacked.

Revenue by stream
Grouped, January to June
  • Subscriptions
  • Services
monthSubscriptionsServices
Jan$18,400$6,200
Feb$19,800$5,400
Mar$21,300$7,900
Apr$22,900$6,800
May$24,100$8,600
Jun$26,700$9,100
Total revenue
Stacked — hover or use arrow keys for the breakdown
  • Subscriptions
  • Services
monthSubscriptionsServices
Jan$18,400$6,200
Feb$19,800$5,400
Mar$21,300$7,900
Apr$22,900$6,800
May$24,100$8,600
Jun$26,700$9,100

Installation

pnpm add krz-ui

Usage

import { BarChart } from "krz-ui";
<BarChart
  data={[{ month: "Jan", online: 120, retail: 80 }, { month: "Feb", online: 150, retail: 95 }]}
  index="month"
  series={["online", "retail"]}
  stacked
/>

API Reference

PropTypeDescription
stackedbooleanStack series (part-to-whole) instead of grouping them.
dataRecord<string, string | number | null>[]One row per x-axis point.
indexstringKey of the x-axis label in each row.
series(string | { key, label?, color? })[]Value keys to plot. Colors follow the palette in order; pass `color` to pin one.
heightnumberPlot height in px. Default 240.
title / descriptionReactNodeCaption above the chart; also used for the accessible name.
valueFormatter(value: number) => stringFormats tooltip and table values.
tickFormatter(value: number) => stringFormats y-axis ticks. Default: comma'd, compact from 10k.
showLegendbooleanDefaults to shown for 2+ series.
tableTogglebooleanShow the “Show data” table toggle. Default true.
className / style / ref—All go to the outer <figure>. See Customization.
classNames{ header?, title?, description?, plot?, legend?, legendItem?, tableToggle?, table?, tooltip? }Extra classes for inner parts.