图表

介绍图表。你可以复制并粘贴到应用中的图表组件集合。

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

Charts 的设计旨在开箱即用。它们与其他组件配合良好，并且完全可定制以适合你的项目。

¥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.

浏览图表库。

¥Browse the Charts Library.

组件

¥Component

我们在底层使用 Recharts。

¥We use Recharts under the hood.

我们在设计 chart 组件时考虑了组合。你使用 Recharts 组件构建图表，并且只在需要时和需要的地方引入自定义组件（例如 ChartTooltip）。

¥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>
  )
}

我们不封装 Recharts。这意味着你不会被锁定在抽象中。当发布新的 Recharts 版本时，你可以按照官方升级路径升级你的图表。

¥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

pnpm dlx shadcn@latest add chart

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
 
  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

你的第一个图表

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

"use client"
 
import { Bar, BarChart } from "recharts"
 
import { ChartConfig, ChartContainer } from "@/components/ui/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",
  },
} satisfies ChartConfig
 
export function Component() {
  return (
    <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>
  )
}

添加网格

¥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

要向图表添加 x 轴，我们将使用 XAxis 组件。

¥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

到目前为止，我们只使用了 Recharts 中的组件。由于 chart 组件中的一些定制，它们开箱即用，外观精美。

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

要添加工具提示，我们将使用 chart 中的自定义 ChartTooltip 和 ChartTooltipContent 组件。

¥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

我们将对图例执行相同操作。我们将使用 chart 中的 ChartLegend 和 ChartLegendContent 组件。

¥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,
    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
    color: "#2563eb",
    // OR a theme object with 'light' and 'dark' keys
    theme: {
      light: "#2563eb",
      dark: "#dc2626",
    },
  },
} satisfies ChartConfig

主题

¥Theming

Charts 内置了对主题的支持。你可以使用 css 变量（推荐）或任何颜色格式的颜色值，例如 hex、hsl 或 oklch。

¥Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.

CSS 变量

¥CSS Variables

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    // ...
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
  }
 
  .dark: {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 100%;
    // ...
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
  }
}

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

--chart-1: oklch(70% 0.227 154.59);

color: "var(--chart-1)",

hex、hsl 或 oklch

¥hex, hsl or oklch

你还可以直接在图表配置中定义颜色。使用你喜欢的颜色格式。

¥You can also define your colors directly in the chart config. Use the color format you prefer.

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

使用颜色

¥Using Colors

要在图表中使用主题颜色，请使用 var(--color-KEY) 格式引用颜色。

¥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]" />

工具提示

¥Tooltip

图表工具提示包含标签、名称、指示符和值。你可以使用这些的组合来自定义你的工具提示。

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

你可以使用 hideLabel、hideIndicator 属性打开/关闭其中任何一个，并使用 indicator 属性自定义指示器样式。

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

使用 labelKey 和 nameKey 使用自定义键作为工具提示标签和名称。

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

Chart 附带 <ChartTooltip> 和 <ChartTooltipContent> 组件。你可以使用这两个组件向你的图表添加自定义工具提示。

¥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.

自定义

¥Custom

要使用自定义键作为工具提示标签和名称，请使用 labelKey 和 nameKey 属性。

¥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: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

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

这将使用 Total Visitors 作为标签，使用 Chrome 和 Safari 作为工具提示名称。

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

图例

¥Legend

你可以使用自定义 <ChartLegend> 和 <ChartLegendContent> 组件向你的图表添加图例。

¥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.

自定义

¥Custom

要使用自定义键作为图例名称，请使用 nameKey 属性。

¥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: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

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

这将使用 Chrome 和 Safari 作为图例名称。

¥This will use Chrome and Safari for the legend names.

可访问性

¥Accessibility

你可以打开 accessibilityLayer 属性以向图表添加可访问的图层。

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

此 prop 为你的图表添加了键盘访问和屏幕阅读器支持。

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

<LineChart accessibilityLayer />