Bar chart React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Bar chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import BarChart from @/components/ui/bar-chart.

import { BarChart } from "@/components/ui/bar-chart"

const data = [
  { month: "2026-07", collected: 106300, expenses: 72400 },
  { month: "2026-08", collected: 97500, expenses: 69900 },
  { month: "2026-09", collected: 128450, expenses: 81200 },
]

export function MonthlyCollections() {
  return (
    <BarChart
      data={data}
      xKey="month"
      series={[
        { key: "collected", label: "Collected" },
        { key: "expenses", label: "Expenses" },
      ]}
      valueFormat="currency"
      currency="USD"
      label="Collected vs. expenses per month"
    />
  )
}

Props

• data*
  ChartDatum[]

  One row per category, in drawing order: { month: "2026-09", collected: 128450, expenses: 81200 }. Negative values grow down (or left) from zero.

• xKeydefault "date"
  string

  The row key for the categories. ISO days ("2026-09-24") and months ("2026-09") print as local dates; other strings print as they are.

• series
  BarChartSeries[]

  Which keys to draw, in color and stack order: { key, label?, color?, name? }. Inferred from the numeric keys of the first rows when omitted.

• colors
  string[]

  Per-position palette overrides: a slot ("series-3"), a tone ("neutral", "success") or any CSS color.

• heightdefault 240
  number

  Plot height in px, reserved before the chart measures so nothing jumps.

• orientationdefault "vertical"
  "vertical" | "horizontal"

  horizontal puts the categories in a label column on the left (at most 40% of the width, long names end in an ellipsis; the tooltip and table keep the full text). The better choice on phones with long names.

• typedefault "grouped"
  "grouped" | "stacked" | "percent"

  grouped sets the series side by side, stacked piles them (negatives below zero), percent piles their shares to 100%.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the data end: 0 / 2 / 4 / 6px or half the thickness. The base stays square; stacks round only their outermost segment.

• barSizedefault 24
  number

  Maximum bar thickness in px. Bars shrink to fit narrow plots instead of overlapping.

• barGapdefault 2
  number

  Px between the bars of one group and between stacked segments, painted in the surface color.

• categoryGapdefault 0.3
  number

  The share of each category's band left empty between groups.

• showValuesdefault false
  boolean

  A value at each bar's tip (grouped), the total at each stack's end (stacked) or the share inside each segment (percent). Every label uses one form: full amounts when they all fit, else the compact form; when they still collide every k-th category is labelled, counted back from the newest. A label with no room goes inside its bar or is skipped, never clipped; bars thinner than 14px carry none.

• getBarColor
  (datum: ChartDatum, series: ResolvedChartSeries, index: number) => (string | undefined)

  A color per bar (a slot, a tone or any CSS color): "danger" for negatives, "brand" for the current month. undefined keeps the series color.

• highlightLastdefault false
  boolean

  Dims every category but the last to 45%, for the current-period look. The inspected category lights up too.

• valueFormatdefault "number"
  ChartValueFormat = "number" | "compact" | "currency" | "percent"

  How values print in the tooltip, ticks, value labels and table. Percent takes whole numbers (12.4 -> "12,4 %").

• currencydefault "USD"
  string

  ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$128,450").

• decimals
  number

  Fraction digits in the tooltip, labels and table; auto by magnitude when unset. Ticks stay short.

• formatValue
  (value: number, context: { series: string; kind: "tooltip" | "tick" | "label" | "table" }) => string

  Replaces the built-in value formatting everywhere.

• formatX
  (value: unknown, context: "axis" | "tooltip" | "table") => string

  Replaces the category label formatting (short on the axis, long in the tooltip and table).

• localedefault ""
  string

  Locale for numbers and dates. Empty uses the UIProvider / LocaleProvider locale.

• yDomaindefault "["auto", "auto"]"
  BarChartDomain = [number | "auto", number | "auto"]

  Fixed value bounds; zero is always included. Ignored by percent (always 0 to 100%).

• showGriddefault true
  boolean

  Hairlines at the value ticks (horizontal lines, or vertical ones for horizontal bars).

• showXAxisdefault true
  boolean

  The labels under the plot: categories (thinned so they never collide), or value ticks for horizontal bars.

• showYAxisdefault true
  boolean

  The labels beside the plot: compact value ticks ("$128K"), or the category column for horizontal bars.

• yAxisSidedefault "start"
  "start" | "end"

  end puts the value ticks on the right, finance style (vertical bars; horizontal bars keep categories on the left).

• showLegenddefault true
  boolean

  The legend; it only renders with two or more series (one series is named by the card title).

• legendPositiondefault "top"
  "top" | "bottom"

  Legend above or below the plot.

• legendToggledefault true
  boolean

  Legend entries are buttons that hide and show their series. The last visible series cannot be hidden.

• showTooltipdefault true
  boolean

  The floating readout. When off, the band, keyboard and screen reader announcements still work.

• tooltipModedefault "auto"
  "auto" | "float" | "fixed"

  float rides beside the inspected bars, fixed pins above the plot (never under a finger); auto is fixed on touch screens.

• referenceLines
  { value: number; label?: string; color?: string }[]

  Dashed target or average lines with a label ("Target $120,000"); always inside the value range.

• animateddefault true
  boolean

  Bars grow on first view and glide on data, type and legend changes. Reduced motion always shows the final state.

• loadingdefault false
  boolean

  A bar-shaped skeleton in the plot's box.

• emptyState
  ReactNode

  Replaces the built-in empty state (shown when data is empty or every value is null).

• labeldefault ""
  string

  Accessible name of the figure and caption of its data table. Empty joins the series names.

• descriptiondefault ""
  string

  A one-sentence takeaway for screen readers ("September brought the highest collections of the year").

• surfacedefault ""
  string

  The color behind the chart, used for label halos. Empty uses the surface token; set it when the chart sits on a card.

• hiddenSeries
  string[]

  Hidden series keys when you control legend toggling; pair with onHiddenSeriesChange.

• defaultHiddenSeries
  string[]

  Series keys hidden at first, when the legend toggles on its own.

• onHiddenSeriesChange
  (keys: string[]) => void

  Called when a legend entry hides or shows a series.

• activeIndex
  number | null

  The inspected category index when you control it, so two charts can share one highlight.

• defaultActiveIndex
  number | null

  The category inspected at first (a pinned readout), uncontrolled.

• onActiveIndexChange
  (index: number | null) => void

  Called as the highlighted category changes (mouse, touch or keyboard) and with null when it clears.

• onDatumClick
  (event: { index: number; datum: ChartDatum; series?: string }) => void

  A click or tap on a category (series is the bar under the pointer, else the first visible series) or Enter on the inspected one.

• labels
  Partial<BarChartLabels>

  Strings: empty, loading, table, total, inspectHint, inspectHintVertical, showSeries, hideSeries, category (Category, the table's first column).

• classNames
  Partial<Record<BarChartSlot, string>>

  Classes for legend, plot, tooltip, table, grid, xAxis, yAxis, bar, band, value, category, referenceLine and inspect.

Parts

FAQ

Used in

More React chart and stat components