Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Mixed Bar Chart

Horizontal bars, one per browser, each in its own color from the chart config. For comparing a few named categories in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Use it for a short list of distinct things (browsers, plans, teams) where each keeps its color across the page, such as a pie of the same data nearby. For one series over time, a single color reads calmer.

Five bars run to the right with 5px corners, Chrome down to Other, each in one of the five chart colors and named beside it. There's no value axis or grid; the tooltip gives the visitor count.

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

Customize

  • Each row has a fill, var(--color-chrome) and so on. <Bar dataKey="visitors" radius={5} /> has no fill of its own, so every bar takes its row's.
  • layout="vertical" with <YAxis dataKey="browser" type="category"> lists the browsers, and <XAxis type="number" hide /> scales the lengths.
  • The <YAxis> tickFormatter looks each key up in chartConfig to print Chrome, not chrome.
  • <ChartTooltipContent hideLabel /> shows the count with the bar's color and the visitors label.

FAQ

How does each bar get its own color?

Each row has a fill that points at its config variable, var(--color-chrome). <Bar> has no fill of its own, so it uses the row's. Change the browser's color in chartConfig to recolor its bar.

What if I have more than five categories?

The theme has five chart colors, --chart-1 to --chart-5. Add tokens of your own, or give the extra entries any CSS color. Past seven or eight, one color with sorted bars reads better.

Can a pie chart use the same colors?

Yes. The pie charts use the same browsers with the same chartConfig colors. Share one config object between both charts and each browser keeps its color.

Where do the browser names come from?

From <YAxis>: its tickFormatter returns chartConfig[value].label, so the data keeps short keys and the axis prints labels.

Do I need a legend?

Not here: each bar has its name beside it, so a legend would repeat the axis. Add one when the axis is hidden or a color shows up in more than one place.

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