Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Multiple Bar Chart

Desktop and mobile bars side by side in each month, so you compare two series directly at every point. Grouped bars for React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use grouped bars when the question is which series is bigger in each month. When the question is the total and its split, stack them instead. Past three or four series the bars get thin: show one at a time, as the interactive version does.

Each month holds a desktop bar and a mobile bar with 4px corners, in the first two chart colors, over horizontal grid lines. The tooltip lists both values for the month.

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

Usage

import { ChartBarMultiple } from "@/components/charts/chart-bar-multiple";
<ChartBarMultiple />

Customize

  • Two <Bar> elements, dataKey="desktop" and dataKey="mobile", with no stackId: Recharts sets them side by side.
  • The JSX order is the order in each group: the first <Bar> is on the left.
  • barGap and barCategoryGap on <BarChart> space the bars within and between months.
  • Each <Bar> has radius={4} and fills with its own var(--color-<key>).
  • <ChartTooltipContent indicator="dashed" /> marks each series with a dashed line.

FAQ

Grouped or stacked bars: which should I use?

Grouped, when people compare the series with each other month by month. Stacked, when they read the total and how it splits. The Stacked Bar Chart with Legend draws this data the other way.

How do I add a third series?

Add the field to every row, a tablet entry to chartConfig, and a third <Bar dataKey="tablet" fill="var(--color-tablet)" radius={4} />. Recharts splits each month in three.

How do I change the space between the bars?

barGap on <BarChart> is the gap between a month's bars and barCategoryGap the gap between months, in pixels or a percentage.

How do I change which series comes first?

Swap the two <Bar> elements: the first in the JSX is drawn on the left of each month.

Does the tooltip show both series?

Yes. Recharts' tooltip lists every <Bar> at the hovered month, each with the dashed indicator from <ChartTooltipContent indicator="dashed" />.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts