/

Bar Chart

Compare categorical data with rectangular bars. Supports vertical, horizontal, stacked, and grouped layouts.

Usage

example.tsx
import { BarChart } from "@chartts/react"

<BarChart
  data={quarterlyData}
  x="quarter"
  y={["revenue", "expenses"]}
  stacked
  radius={6}
/>

Props

PropTypeDescription
dataT[]Array of data objects
xkeyof TKey for category labels
ykeyof T | (keyof T)[]Key(s) for bar values
stackedbooleanStack bars for multi-series. Default: false
horizontalbooleanRender horizontal bars. Default: false
groupPaddingnumberPadding between groups. 0-1. Default: 0.2
barPaddingnumberPadding between bars in a group. 0-1. Default: 0.1
radiusnumberBorder radius for bar corners. Default: 4

Features

  • Vertical and horizontal layouts
  • Stacked and grouped modes
  • Rounded bar corners
  • Animated entry with stagger
  • Value labels on bars
  • Automatic color assignment

Other Charts