React Bar Chart

A React bar chart component that renders as real SVG DOM elements. Supports vertical, horizontal, stacked, and grouped layouts. Style everything with Tailwind.

$npm install @chartts/react

example.tsx

import { BarChart } from "@chartts/react"

export function SalesChart() {
  const data = [
    { product: "Widget A", sales: 1200 },
    { product: "Widget B", sales: 2400 },
    { product: "Widget C", sales: 1800 },
    { product: "Widget D", sales: 3100 },
  ]

  return (
    <BarChart
      data={data}
      x="product"
      y="sales"
      className="h-72"
      barClassName="fill-emerald-500 dark:fill-emerald-400"
    />
  )
}

Features

Vertical, horizontal, stacked, and grouped layouts

SVG rendering for CSS styling and accessibility

Tailwind className on bars, axes, and labels

Animated transitions between data states

Responsive with automatic label rotation

WCAG AA compliant

Under 3kb tree-shaken

Read the Docs See Demos Examples