Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

A multiple bar chart for React

Desktop and mobile sit side by side for each month, in two colors. The tooltip lists both with a dashed mark.

Each month has two bars side by side, desktop and mobile, in two colors. The tooltip lists both, with a dashed mark beside each name.

Use grouped bars when people compare two series in the same month, not a running total. When the total matters more, stack them, or list both columns in a Table. In React, Base UI does not group the series. You pass both keys.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

Usage

<div className="w-full max-w-xl rounded-md border bg-background p-4">
  <ChartContainer config={chartConfig}>
    <BarChart accessibilityLayer data={chartData}>
      <CartesianGrid vertical={false} />
      <XAxis
        axisLine={false}
        dataKey="month"
        tickFormatter={formatMonth}
        tickLine={false}
        tickMargin={10}
      />
      <ChartTooltip
        content={<ChartTooltipContent indicator="dashed" />}
        cursor={false}
      />
      <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
      <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
    </BarChart>
  </ChartContainer>
</div>

FAQ

How are desktop and mobile shown side by side?

Two Bar components share the chart. One uses dataKey desktop and fill var(--color-desktop). The other uses dataKey mobile and fill var(--color-mobile). Both set radius to 4.

Where do the two colors come from?

config sets desktop to var(--chart-1) with the label Desktop, and mobile to var(--chart-2) with the label Mobile. ChartContainer turns those into --color-desktop and --color-mobile.

How are the months abbreviated?

XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, and tickMargin is 10. CartesianGrid sets vertical to false.

Why is the tooltip indicator dashed?

ChartTooltipContent sets indicator to dashed, and cursor is false. Hovering a month lists both series, named Desktop and Mobile from config, under that month.

Can I move through the bars with the keyboard?

Yes. BarChart sets accessibilityLayer. Each series has a label in config, which the tooltip reuses for the row name.

What values are paired for each month?

January is desktop 186 and mobile 80, February 305 and 200, March 237 and 120, April 73 and 190, May 209 and 130, and June 214 and 140. Each object is one group of two bars.

API Reference

Chart

Sets config={chartConfig} and indicator="dashed". The rest is on the Chart page.

All 70 chart examples