Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Bar Chart with Active Bar

Five browser bars where one, Firefox, is drawn as active with a dashed outline and a lighter fill. Points at one category in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it to point at one category in a set: the plan you're selling, this month's leader, the item the page is about. The highlight comes from the data, not the hover, so it holds in a screenshot. For colors without a single focus, the mixed bar chart fits.

Five rounded bars stand in their browsers' colors. The third, Firefox, keeps its color at 80% and gets a 2px dashed outline in the same color. The tooltip shows the visitor count without a title.

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

Customize

  • shape on <Bar> draws each bar: a <Rectangle> with fillOpacity={0.8}, a stroke in the row's fill and strokeDasharray={4} when index === ACTIVE_INDEX, a plain <Rectangle> otherwise.
  • ACTIVE_INDEX is 2, the third row. Change it to highlight another bar.
  • Each row carries fill: "var(--color-<browser>)", and strokeWidth={2} on <Bar> sets the outline's width.
  • The <XAxis> tickFormatter looks each key up in chartConfig to print its label.

FAQ

How do I change which bar is active?

Change ACTIVE_INDEX: it's the row's position in chartData, 2 for Firefox. To pick a bar by name, compare props.payload.browser inside shape instead of the index.

How is the dashed outline drawn?

The active <Rectangle> gets stroke={props.payload.fill}, strokeDasharray={4} and strokeDashoffset={4}. Its width comes from strokeWidth={2} on <Bar>.

Can the active bar follow the pointer?

Yes. Pass the active props to activeBar on <Bar> instead of branching in shape: Recharts draws that style on the hovered bar.

How do I let people pick the active bar?

Add onClick to <Bar>: it receives the clicked bar's data and index. Keep the index in useState and compare it in shape in place of ACTIVE_INDEX.

Is the highlight accessible?

Color isn't the only cue: the active bar also gets a dashed outline, which reads in grayscale. If the highlight means something, say what in the card's description or footer, since the chart can't.

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