Mario Charts
Star Mario Charts on GitHub

Charts / Categorical

Bar Chart

Compare values across categories with accessible interactions, responsive layouts, and useful production states built in.

  • Type-safe
  • Keyboard accessible
  • Responsive
  • Copy-paste ready
Install Bar Chart
npx mario-charts@latest add bar-chart

Playground

Start with the default, then adjust only what your data needs.

Loading...
tsx
import { BarChart } from "@/components/charts/bar-chart";

const data = [
  { month: "Jan", revenue: 4500 },
  { month: "Feb", revenue: 5200 },
  { month: "Mar", revenue: 4800 },
  { month: "Apr", revenue: 6100 },
];

export function RevenueChart() {
  return (
    <BarChart
      data={data}
      x="month"
      y="revenue"
      showGrid
    />
  );
}

Resilient by default

Built-in states preserve context when the data is not ready to render.

  • Loading

    Keeps the chart frame stable while data is being resolved.

    loading={true}

  • Error

    Replaces the plot with an actionable message without shifting the layout.

    error="Could not load data"

  • Empty

    Explains that no values are available instead of rendering an empty plot.

    data={[]}

Choose the right orientation

The shape of the labels should decide the layout.

Vertical

Best for short category labels and chronological comparison.

Horizontal

Best for long labels, rankings, and dense category lists.

API Reference

The core surface stays small; advanced behavior remains explicit.

PropTypeDefaultDescription
dataRequired
readonly T[]—Data objects rendered by the chart.
xRequired
keyof T—Property used for category labels.
y
keyof T"value"Property used for numeric values.
colors
readonly string[]chart paletteColors applied to bars in order.
variant
"filled" | "outline""filled"Visual treatment for each bar.
orientation
"vertical" | "horizontal""vertical"Direction in which bars grow.
height
number300Chart height in pixels.
showGrid
booleanfalseDisplays grid lines and value ticks.
animation
booleantrueEnables the entrance animation.
loading
booleanfalseDisplays the loading state.
error
string | nullnullDisplays an actionable error state.
onBarClick
(data: T, index: number) => void—Runs when a bar is selected.