shadcn.io is not affiliated with official shadcn/ui
About
Use it when one chart should cover more than one metric and the reader picks: page views by device, sales by region. Each header button shows its series' total, so the number reads before the bars. To compare the series at once, use grouped bars or two lines.
Ninety-one daily bars fill the card's width, with a few dates along the bottom. Pressing Desktop or Mobile swaps the series and its color, and the tooltip names the full date.
Installation
Usage
import { ChartBarInteractive } from "@/components/charts/chart-bar-interactive";<ChartBarInteractive />Customize
useStateholdsactiveChart.<Bar dataKey={activeChart}>draws that series, and itsfillbuildsvar(--color-<key>)from the same key.- The header buttons carry
data-active, anduseMemosums each series once for the totals. <XAxis minTickGap={32}>drops dates that would collide, andtickFormatterprints them asApr 1.<ChartTooltipContent nameKey="views" labelFormatter={…} />names the row Page Views and titles it with the full date.
FAQ
How does the header switch the series?
onClick sets activeChart with useState, and <Bar dataKey={activeChart}> reads it. The active button gets data-active="true", which data-[active=true]:bg-muted/50 shades.
How do I add a third metric?
Add the field to every row, an entry to chartConfig, and the key to the ["desktop", "mobile"] array the header maps over. Then add it to the total that useMemo sums.
How do I show a shorter period?
Filter chartData before the chart reads it, as the Interactive Area Chart does with its 90, 30 and 7 day select. Fewer days give wider bars.
How are the dates formatted?
tickFormatter on <XAxis> prints Apr 1, and minTickGap={32} skips labels that would collide. The tooltip's labelFormatter prints the full date with the year.
API Reference
ChartContainer
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>
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>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
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– anypayload– 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.
Related
Interactive Area Chart
Area chartsThree months of daily visitors with a time range select.
Interactive Line Chart
Line chartsThree months of daily values, switched between two series.
Multiple Bar Chart
Bar chartsTwo series grouped side by side for each month.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.
Interactive Pie Chart
Pie chartsA donut whose active month is picked from a select.
Horizontal Bar Chart
Bar chartsHorizontal bars with the categories down the side.