Stacked Bar Chart

Stacked bar chart component with legend and rounded corners. Built for React applications requiring cumulative data visualization with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A stacked bar chart with a legend"const chartData = [  { month: "January", desktop: 186, mobile: 80 },  { month: "February", desktop: 305, mobile: 200 },  { month: "March", desktop: 237, mobile: 120 },  { month: "April", desktop: 73, mobile: 190 },  { month: "May", desktop: 209, mobile: 130 },  { month: "June", desktop: 214, mobile: 140 },]const chartConfig = {  desktop: {    label: "Desktop",    color: "var(--chart-1)",  },  mobile: {    label: "Mobile",    color: "var(--chart-2)",  },} satisfies ChartConfigexport function ChartBarStacked() {  return (    <div className="w-full h-full flex flex-col p-4">      <div className="flex flex-col gap-1 pb-4 mb-4 border-b">        <h3 className="text-lg font-semibold">Bar Chart - Stacked + Legend</h3>        <p className="text-sm text-muted-foreground">January - June 2024</p>      </div>      <div className="flex-1 flex items-center justify-center min-h-0">        <ChartContainer config={chartConfig} className="h-[250px] w-full">          <BarChart accessibilityLayer data={chartData}>            <CartesianGrid vertical={false} />            <XAxis              dataKey="month"              tickLine={false}              tickMargin={10}              axisLine={false}              tickFormatter={(value) => value.slice(0, 3)}            />            <ChartTooltip content={<ChartTooltipContent hideLabel />} />            <ChartLegend content={(props) => <ChartLegendContent payload={props.payload} verticalAlign={props.verticalAlign} />} />            <Bar              dataKey="desktop"              stackId="a"              fill="var(--color-desktop)"              radius={[0, 0, 4, 4]}            />            <Bar              dataKey="mobile"              stackId="a"              fill="var(--color-mobile)"              radius={[4, 4, 0, 0]}            />          </BarChart>        </ChartContainer>      </div>      <div className="flex flex-col items-start gap-2 text-sm pt-4 border-t">        <div className="flex gap-2 leading-none font-medium">          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />        </div>        <div className="text-muted-foreground leading-none">          Showing total visitors for the last 6 months        </div>      </div>    </div>  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-05.json

npx shadcn@latest add https://www.shadcn.io/registry/bar-chart-05.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/bar-chart-05.json

bunx shadcn@latest add https://www.shadcn.io/registry/bar-chart-05.json

Features

Stacked visualization combining desktop and mobile data into single bars
Interactive legend providing clear identification of data series
Custom radius styling with different corner radius for top and bottom segments
Stack grouping using shared stackId for proper data stacking
TypeScript support with complete type definitions for stacked charts
shadcn/ui integration using Chart components with legend styling

Use Cases

This free open source React component works well for:

Total visualization - Applications showing cumulative data across categories built with Next.js
Part-to-whole analysis - Understanding composition of total values using TypeScript and Tailwind CSS
Budget breakdowns - Financial data showing component contributions to totals
Resource allocation - Visualizing how resources are distributed across different areas

API Reference

ChartBarStacked

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the card container

Stacked Configuration

Two Bar components with shared stackId for stacking:

<Bar
  dataKey="desktop"
  stackId="a"
  fill="var(--color-desktop)"
  radius={[0, 0, 4, 4]}
/>
<Bar
  dataKey="mobile"
  stackId="a"
  fill="var(--color-mobile)"
  radius={[4, 4, 0, 0]}
/>

Legend Integration

Built-in legend component for series identification:

<ChartLegend content={<ChartLegendContent />} />

Radius Styling

Bottom segment (desktop): [0, 0, 4, 4] - rounded bottom corners
Top segment (mobile): [4, 4, 0, 0] - rounded top corners

Implementation Notes

Shared stackId "a" ensures data stacking rather than side-by-side display
Bottom segment gets bottom corner radius, top segment gets top corner radius
Legend automatically generates based on chartConfig labels and colors
Tooltip hides labels focusing on individual segment values
Creates cohesive stacked bars showing total and component values
Perfect for applications requiring cumulative data visualization with clear component identification

Reactbar-chart-05

On this page