Multi-Color Bar Chart

Mixed bar chart component with horizontal multi-color bars. Built for React applications requiring categorical data visualization with Next.js and TypeScript.

Recharts

Loading component...

"use client"import { TrendingUp } from "lucide-react"import { Bar, BarChart, XAxis, YAxis } from "recharts"import {  ChartConfig,  ChartContainer,  ChartTooltip,  ChartTooltipContent,} from "@/components/ui/chart"export const description = "A mixed bar chart"const chartData = [  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },  { browser: "other", visitors: 90, fill: "var(--color-other)" },]const chartConfig = {  visitors: {    label: "Visitors",  },  chrome: {    label: "Chrome",    color: "var(--chart-1)",  },  safari: {    label: "Safari",    color: "var(--chart-2)",  },  firefox: {    label: "Firefox",    color: "var(--chart-3)",  },  edge: {    label: "Edge",    color: "var(--chart-4)",  },  other: {    label: "Other",    color: "var(--chart-5)",  },} satisfies ChartConfigexport function ChartBarMixed() {  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 - Mixed</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}            layout="vertical"            margin={{              left: 0,            }}          >            <YAxis              dataKey="browser"              type="category"              tickLine={false}              tickMargin={10}              axisLine={false}              tickFormatter={(value) =>                chartConfig[value as keyof typeof chartConfig]?.label              }            />            <XAxis dataKey="visitors" type="number" hide />            <ChartTooltip              cursor={false}              content={<ChartTooltipContent hideLabel />}            />            <Bar dataKey="visitors" radius={5} />          </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-08.json

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

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

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

Features

Multi-color bars with each category using a distinct color scheme
Horizontal layout optimized for browser/category name display
Individual fill colors defined directly in data with fallback to chart config
Custom tick formatting displaying full category labels from chart configuration
TypeScript support with complete type definitions for mixed color charts
shadcn/ui integration using Chart components with multi-color styling

Use Cases

This free open source React component works well for:

Browser analytics - Applications showing browser usage statistics built with Next.js
Category comparisons - Data visualization requiring distinct category identification using TypeScript and Tailwind CSS
Market share analysis - Charts where each segment needs unique visual identity
Performance tracking - Multi-category metrics with clear visual separation

API Reference

ChartBarMixed

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

Data Structure with Fill Colors

Each data item includes its own fill color:

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

Chart Configuration

Multi-category configuration with individual colors:

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

Tick Formatting

Custom Y-axis formatting for category labels:

<YAxis
  dataKey="browser"
  type="category"
  tickFormatter={(value) =>
    chartConfig[value as keyof typeof chartConfig]?.label
  }
/>

Implementation Notes

Each bar automatically uses its individual fill color from the data
Y-axis displays full category names via chart config lookup
X-axis is hidden to focus on relative comparisons
Horizontal layout accommodates longer category names
Zero left margin maximizes chart display area
Perfect for applications requiring distinct visual identity for each data category

Multi-Color Bar Chart

Reactbar-chart-08

On this page