🌐 Nodejs.cn
新建

图表

PreviousNext

漂亮的图表。使用 Recharts 构建。复制并粘贴到你的应用中。

Radix UIBase UI
Radix UI
Bar Chart - Interactive
Showing total visitors for the last 3 months

介绍 Charts。一组图表组件，你可以将它们复制并粘贴到你的应用中。

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

浏览图表库。

组件

🌐 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/chart"
 
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.

组件是你的。

安装

🌐 Installation

pnpm dlx shadcn@latest add chart

你的第一个图表

🌐 Your First Chart

让我们来创建你的第一个图表。我们将创建一个条形图，添加网格、坐标轴、提示信息和图例。

🌐 Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.

首先定义你的数据

以下数据代表每个月的桌面和移动用户数量。

🌐 The following data represents the number of desktop and mobile users for each month.

components/example-chart.tsx
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 },
]

定义你的图表配置

图表配置保存图表的配置。在这里你可以放置可读的字符串，例如标签、图标和用于主题的颜色令牌。

🌐 The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.

components/example-chart.tsx
import { type ChartConfig } from "@/components/ui/chart"
 
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
} satisfies ChartConfig

建立你的图表

你现在可以使用 Recharts 组件构建图表。

🌐 You can now build your chart using Recharts components.

"use client"

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

添加网格

🌐 Add a Grid

让我们在图表中添加一个网格。

🌐 Let's add a grid to the chart.

导入 CartesianGrid 组件。

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

将 CartesianGrid 组件添加到你的图表中。

<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>
"use client"

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

添加轴

🌐 Add an Axis

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

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

导入 XAxis 组件。

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

将 XAxis 组件添加到你的图表中。

<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>
"use client"

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

添加工具提示

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

导入 ChartTooltip 和 ChartTooltipContent 组件。

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>
"use client"

import {

将鼠标悬停以查看工具提示。很简单，对吧？两个组件，我们就有了一个漂亮的工具提示。

🌐 Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.

添加图例

🌐 Add Legend

我们将对图例做同样的处理。我们将使用 chart 中的 ChartLegend 和 ChartLegendContent 组件。

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

导入 ChartLegend 和 ChartLegendContent 组件。

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>
"use client"

import {

完成了。你已经创建了你的第一个图表！接下来做什么？

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

图表配置

🌐 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 work 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

图表内置了主题支持。你可以使用 CSS 变量（推荐）或任何颜色格式的颜色值，例如十六进制、HSL 或 OKLCH。

🌐 Charts have 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

在你的 CSS 文件中定义你的颜色

app/globals.css
@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
 
  .dark: {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

将颜色添加到你的 chartConfig

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

hex、hsl 或 oklch

🌐 hex, hsl or oklch

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

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

components/example-chart.tsx
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(220, 98%, 61%)",
  },
  tablet: {
    label: "Tablet",
    color: "oklch(0.5 0.2 240)",
  },
  laptop: {
    label: "Laptop",
    color: "var(--chart-2)",
  },
} 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

components/example-chart.tsx
const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

Tailwind

components/example-chart.tsx
<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.

Label
Page Views
Desktop
186
Mobile
80
Name
Chrome
1,286
Firefox
1,000
Page Views
Desktop
12,486
Indicator
Chrome
1,286

你可以使用 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.

图表附带 <ChartTooltip> 和 <ChartTooltipContent> 组件。你可以使用这两个组件为图表添加自定义提示信息。

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

components/example-chart.tsx
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
components/example-chart.tsx
<ChartTooltip content={<ChartTooltipContent />} />

属性

🌐 Props

使用以下属性自定义工具提示。

🌐 Use the following props to customize the tooltip.

属性类型描述
labelKey字符串用于标签的配置或数据键。
nameKey字符串用于名称的配置或数据键。
indicatordot line 或 dashed工具提示的指示器样式。
hideLabel布尔值是否隐藏标签。
hideIndicator布尔值是否隐藏指示器。

颜色

🌐 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: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig
components/example-chart.tsx
<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.

components/example-chart.tsx
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
components/example-chart.tsx
<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: "var(--chart-1)",
  },
  safari: {
    label: "Safari",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig
components/example-chart.tsx
<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.

components/example-chart.tsx
<LineChart accessibilityLayer />

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import {