Chart

"use client"

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

About

The Chart component is built using Recharts. It provides a set of composable chart components with built-in theming support.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/chart.json

Usage

Copyimport {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

Copyconst chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig
 
export function MyChart() {
  return (
    <ChartContainer config={chartConfig}>
      <BarChart data={data}>
        <Bar dataKey="desktop" fill="var(--color-desktop)" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

Chart Config

The chart config defines labels, icons, and colors for each data series.

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

Theme Colors

You can use theme colors from CSS variables:

Copyconst chartConfig = {
  desktop: {
    label: "Desktop",
    theme: {
      light: "#2563eb",
      dark: "#3b82f6",
    },
  },
}

Examples

Bar Chart

A basic bar chart with multiple data series.

"use client"

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

With Legend

Add a legend to identify data series.

"use client"

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

Line Chart

A line chart for showing trends over time.

"use client"

import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

Area Chart

An area chart with gradient fills.

"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

Pie Chart

A pie chart for showing proportions.

"use client"

import { Pie, PieChart } from "recharts"

Radar Chart

A radar chart for comparing multiple variables.

"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

Theming

The chart components use CSS variables for colors. The following variables are available by default:

• --chart-1 through --chart-5

These are defined in your globals.css with light and dark variants.

API Reference

ChartContainer

The main wrapper component that provides context and responsive sizing.

ChartTooltip

Re-exported from Recharts with custom styling.

ChartTooltipContent

Custom tooltip content component.

ChartLegend

Re-exported from Recharts with custom styling.

ChartLegendContent

Custom legend content component.