Chart

Installation

›pnpm dlx shadcn@latest add @evolphin/chart

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { Bar, BarChart } from "recharts";

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
}

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

Type Definitions

interface ChartConfig {
  [k: string]: {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<"light" | "dark", string> }
  );
}

Examples

Bar Chart

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: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
}

<ChartContainer config={chartConfig} className="min-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>

Charts require Recharts library and specific data structure. See the Recharts documentation for more examples.

API Reference

ChartContainer

Prop	Type	Default	Description
`config`	`ChartConfig`	-	Configuration for the chart colors and labels.
`children`	`React.ReactNode`	-	The Recharts component.
`className`	`string`	-	Additional CSS classes

ChartTooltip

A wrapper around Recharts Tooltip that uses the chart config.

ChartTooltipContent

Prop	Type	Default	Description
`hideLabel`	`boolean`	`false`	Hide the label in the tooltip.
`hideIndicator`	`boolean`	`false`	Hide the indicator in the tooltip.
`indicator`	`"line" \	"dot" \	"dashed"`
`labelKey`	`string`	-	The key to use for the label.
`nameKey`	`string`	-	The key to use for the name.

ChartLegend

A wrapper around Recharts Legend that uses the chart config.

ChartLegendContent

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hide the icon in the legend.
`nameKey`	`string`	-	The key to use for the name.

Search

On this page