Chart

Powered by

Shadcn UIRecharts

Introducing Charts. A collection of chart components that you can copy and paste into your apps.

Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project using the Redpanda UI color system.

Browse the Charts Library.

When to use

Use this decision tree to determine when to use Chart components and which type is most appropriate for your data:

Chart Type Guidelines

• Bar/Column Charts: Comparing quantities across categories, showing rankings or changes over time
• Line Charts: Showing trends over time, continuous data, multiple data series comparisons
• Area Charts: Cumulative values over time, showing volume and trends together
• Pie/Donut Charts: Parts of a whole, percentages, composition (limit to 5-6 segments max)
• Scatter Plots: Correlations between two variables, distributions, outlier identification
• Radar Charts: Comparing multiple variables across categories, performance metrics

Charts vs Other Components

• Use Charts when: You need to visualize quantitative data, show trends, or help users understand relationships between data points
• Use Tables when: Users need to see exact values, perform calculations, or work with detailed records
• Use Progress/Meters when: Showing simple completion status or single metric progress
• Use Statistics Cards when: Displaying key metrics without requiring trend analysis

Anatomy

The Chart system is built with composable components using Recharts and a configuration-driven approach:

Chart Component Architecture:
┌─────────────────────────────────────────────┐
│ ChartContainer (Context Provider)           │
│ ┌─────────────────────────────────────────┐ │
│ │ ChartStyle (Dynamic CSS Generation)     │ │
│ │ - Generates --color-KEY variables       │ │
│ │ - Theme-aware color mapping             │ │
│ │ - Scoped to chart instance              │ │
│ └─────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────┐ │
│ │ ResponsiveContainer (Recharts)          │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ Chart Type (Bar/Line/Area/Pie)      │ │ │
│ │ │ ┌─────────────────────────────────┐ │ │ │
│ │ │ │ Data Elements                   │ │ │ │
│ │ │ │ - Bar, Line, Area segments      │ │ │ │
│ │ │ │ - Uses var(--color-KEY) refs    │ │ │ │
│ │ │ └─────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────┐ │ │ │
│ │ │ │ CartesianGrid (optional)        │ │ │ │
│ │ │ │ - Background grid lines         │ │ │ │
│ │ │ └─────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────┐ │ │ │
│ │ │ │ XAxis / YAxis (optional)        │ │ │ │
│ │ │ │ - Labeled axes with formatting  │ │ │ │
│ │ │ └─────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────┐ │
│ │ ChartTooltip (Custom Component)         │ │
│ │ - Appears on hover/focus                │ │
│ │ - Uses config for labels/colors         │ │
│ │ - Supports icons and custom formatting  │ │
│ └─────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────┐ │
│ │ ChartLegend (Custom Component)          │ │
│ │ - Shows data series labels              │ │
│ │ - Color indicators match chart          │ │
│ │ - Positioned above/below chart          │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

ChartConfig Structure:
{
  dataKey: {
    label: "Human Label",           // For tooltips/legends
    icon: IconComponent,            // Optional icon
    color: "var(--chart-1)",        // Theme color reference
    // OR
    theme: {                        // Custom theming
      light: "#color1",
      dark: "#color2"
    }
  }
}

Component Composition

• ChartContainer: Root wrapper providing theme context and responsive sizing
• ChartConfig: Configuration object defining labels, colors, and icons for data keys
• ChartStyle: Dynamic CSS generation for theme-aware color variables
• Recharts Integration: Direct use of Recharts components (Bar, Line, Area, etc.)
• Custom Components: ChartTooltip, ChartLegend for consistent theming
• Color System: Automatic color resolution from CSS variables or theme objects
• Accessibility: Built-in screen reader support via accessibilityLayer prop

Component

We use Recharts under the hood.

We designed the chart component with composition in mind. You build your charts using Recharts components and only bring in custom components, such as ChartTooltip, when and where you need it.

import { Bar, BarChart } from "recharts"

import { ChartContainer, ChartTooltipContent } from "@/components/ui/charts"

export function MyChart() {
  return (
    <ChartContainer>
      <BarChart data={data}>
        <Bar dataKey="value" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

We do not wrap Recharts. This means you're not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts.

The components are yours.

Installation

Chart Color System

The Redpanda UI theme includes a cohesive chart color system defined in theme.css. The colors are built using OKLCH format for better perceptual uniformity and maintain the warm color palette (hue ~28.2) for brand consistency.

Current Chart Colors

These colors are already included in your theme.css file:

:root {
  /* Chart colors using OKLCH format */
  --chart-1: oklch(0.551 0.15 28.2);
  --chart-2: oklch(0.776 0.09 28.2);
  --chart-3: oklch(0.668 0.12 28.2);
  --chart-4: oklch(0.888 0.08 28.2);
  --chart-5: oklch(0.448 0.18 28.2);
}

.dark {
  /* Dark mode chart colors */
  --chart-1: oklch(0.776 0.09 28.2);
  --chart-2: oklch(0.668 0.12 28.2);
  --chart-3: oklch(0.888 0.08 28.2);
  --chart-4: oklch(0.551 0.15 28.2);
  --chart-5: oklch(0.448 0.18 28.2);
}

Color Characteristics

The chart colors follow the Redpanda UI design system:

• Consistent hue: All colors use hue 28.2 for visual harmony
• Varying lightness and chroma: Creates distinction while maintaining cohesion
• OKLCH format: Ensures perceptual uniformity across different displays
• Automatic dark mode: Dark mode reorders colors for optimal contrast

Usage in Chart Config

Reference these colors in your chart configuration:

import { type ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)", // Uses OKLCH color directly
  },
  mobile: {
    label: "Mobile", 
    color: "var(--chart-2)",
  },
  tablet: {
    label: "Tablet",
    color: "var(--chart-3)",
  },
} satisfies ChartConfig

Your First Chart

Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and 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 },
]

import { type ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

Add a Grid

Let's add a grid to the chart.

import { Bar, BarChart, CartesianGrid } from "recharts"

<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

Add an Axis

To add an x-axis to the chart, we'll use the XAxis component.

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

<ChartContainer config={chartConfig} className="h-[200px] w-full">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis
      dataKey="month"
      tickLine={false}
      tickMargin={10}
      axisLine={false}
      tickFormatter={(value) => value.slice(0, 3)}
    />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

Add Tooltip

So far we've only used components from Recharts. They look great out of the box thanks to some customization in the chart component.

To add a tooltip, we'll use the custom ChartTooltip and ChartTooltipContent components from chart.

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig} className="h-[200px] 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 />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

Add Legend

We'll do the same for the legend. We'll use the ChartLegend and ChartLegendContent components from chart.

import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"

<ChartContainer config={chartConfig} className="h-[200px] 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 />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>

Done. You've built your first chart! What's next?

• Themes and Colors
• Tooltip
• Legend

Chart Config

The chart config is where you define the labels, icons and colors for a chart.

It is intentionally decoupled from chart data.

This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.

import { Monitor } from "lucide-react"

import { type ChartConfig } from "@/components/ui/chart"

const chartConfig = {
  desktop: {
    label: "Desktop",
    icon: Monitor,
    // Reference Redpanda UI chart colors
    color: "var(--chart-1)",
    // OR use custom colors in any format
    color: "#2563eb",
    // OR use theme object with light and dark keys
    theme: {
      light: "var(--chart-1)",
      dark: "var(--chart-2)",
    },
  },
} satisfies ChartConfig

Theming

Charts has built-in support for theming using the Redpanda UI color system. You can use the predefined CSS variables (recommended) or custom color values in any color format, such as hex, hsl or oklch.

CSS Variables (Recommended)

The Redpanda UI theme includes optimized chart colors that automatically work with light and dark modes.

:root {
  /* These colors are already defined in your theme.css */
  --chart-1: oklch(0.551 0.15 28.2);
  --chart-2: oklch(0.776 0.09 28.2);
  --chart-3: oklch(0.668 0.12 28.2);
  --chart-4: oklch(0.888 0.08 28.2);
  --chart-5: oklch(0.448 0.18 28.2);
}

.dark {
  /* Dark mode variants automatically applied */
  --chart-1: oklch(0.776 0.09 28.2);
  --chart-2: oklch(0.668 0.12 28.2);
  --chart-3: oklch(0.888 0.08 28.2);
  --chart-4: oklch(0.551 0.15 28.2);
  --chart-5: oklch(0.448 0.18 28.2);
}

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)", // Direct OKLCH reference
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

Custom Colors

You can also define your colors directly in the chart config using any color format.

Hex Colors

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

OKLCH Colors

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "oklch(0.65 0.2 280)", // Custom OKLCH color
  },
} satisfies ChartConfig

HSL Colors with CSS Variables

// Define in theme.css
:root {
  --custom-chart-1: 220 70% 50%;
}

// Use in chart config
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(var(--custom-chart-1))",
  },
} satisfies ChartConfig

Using Colors

To use the theme colors in your chart, reference the colors using the format var(--color-KEY).

Components

<Bar dataKey="desktop" fill="var(--color-desktop)" />

Chart Data

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

Tailwind

<LabelList className="fill-[--color-desktop]" />

Brand Consistency

For maximum brand consistency, use the predefined chart colors which follow the Redpanda UI design system:

const chartConfig = {
  primary: { label: "Primary", color: "var(--chart-1)" },
  secondary: { label: "Secondary", color: "var(--chart-2)" },
  tertiary: { label: "Tertiary", color: "var(--chart-3)" },
  quaternary: { label: "Quaternary", color: "var(--chart-4)" },
  quinary: { label: "Quinary", color: "var(--chart-5)" },
} satisfies ChartConfig

Tooltip

A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.

You can turn on/off any of these using the hideLabel, hideIndicator props and customize the indicator style using the indicator prop.

Use labelKey and nameKey to use a custom key for the tooltip label and name.

Chart comes with the <ChartTooltip> and <ChartTooltipContent> components. You can use these two components to add custom tooltips to your chart.

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

<ChartTooltip content={<ChartTooltipContent />} />

Props

Use the following props to customize the tooltip.

Colors

Colors are automatically referenced from the chart config using the Redpanda UI color system.

Custom

To use a custom key for tooltip label and names, use the labelKey and nameKey props.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

const chartConfig = {
  visitors: {
    label: "Total Visitors",
  },
  chrome: {
    label: "Chrome",
    color: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

<ChartTooltip
  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>

This will use Total Visitors for label and Chrome and Safari for the tooltip names.

Legend

You can use the custom <ChartLegend> and <ChartLegendContent> components to add a legend to your chart.

import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"

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

Colors

Colors are automatically referenced from the chart config using the Redpanda UI color system.

Custom

To use a custom key for legend names, use the nameKey prop.

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

const chartConfig = {
  chrome: {
    label: "Chrome",
    color: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

<ChartLegend content={<ChartLegendContent nameKey="browser" />} />

This will use Chrome and Safari for the legend names.

Accessibility

You can turn on the accessibilityLayer prop to add an accessible layer to your chart.

This prop adds keyboard access and screen reader support to your charts.

<LineChart accessibilityLayer />

Examples

Default

With Filter (dates)

Color Reference

Predefined Chart Colors

All colors use the Redpanda UI warm color palette (hue 28.2) and are defined in theme.css.

Credits

• We take our inspiration from Shadcn UI for the chart component and style.