Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Bar Chart with Negative Values

Monthly bars above and below zero, colored by their sign and labeled with the month. For gains and losses, or any value that swings, in React.

Framework
Charting library

Preview

Preview width

About

Use it for values that cross zero: profit and loss, change from last month, a net score. The baseline splits up from down and the color says it twice. When nothing goes below zero, the plain bar chart is enough.

Six square bars rise from or drop below zero. Positive months use the first chart color and the two negative months the second, and each bar carries its month's name at its outer end. There are no axes, only grid lines.

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 { ChartBarNegative } from "@/components/charts/chart-bar-negative";
<ChartBarNegative />

Customize

  • Each row gets a <Cell> inside <Bar> whose fill depends on the sign. Cell is deprecated in Recharts 3; a shape function on <Bar> does the same.
  • <LabelList dataKey="month" position="top" /> writes the month at each bar's outer end.
  • <CartesianGrid vertical={false} /> is the only guide: there's no <XAxis> or <YAxis>.
  • <ChartTooltipContent hideIndicator hideLabel /> leaves the value and its label.

FAQ

How are the bars colored by sign?

A <Cell> per row sets fill from item.visitors > 0. Recharts 3 deprecates Cell, so in new code put the same check in a shape function on <Bar>.

How do I draw a line at zero?

Add <ReferenceLine y={0} stroke="var(--border)" /> inside <BarChart>.

How do I center zero in the chart?

Add a <YAxis hide domain={[-max, max]} />, with max the largest absolute value. Zero then sits in the middle.

Where do the labels go on negative bars?

Below them. <LabelList position="top"> places the label at the bar's outer end, and Recharts takes the sign into account.

Does the chart rely on color alone?

No, and you don't have to: the direction of each bar already says its sign, and the color repeats it. If you switch to red and green, keep that cue and check the pair for color-blind readers.

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