图表

精美的图表。使用 Recharts 构建。复制并粘贴到您的应用程序中。

Radix UI Base UI

注意：我们正在努力升级到 Recharts v3。在此期间，如果您想开始测试 v3，请查看此处评论中的代码这里。我们很快会发布正式版本。

柱状图 - 交互式

显示过去3个月的总访客量

隆重推出图表。一套您可以复制并粘贴到您的应用程序中的图表组件。

图表经过精心设计，开箱即用，视觉效果出色。它们可以与其他组件完美协作，并且可以完全自定义以适配您的项目。

浏览图表库.

组件

我们在底层使用 Recharts。

我们设计 chart 组件时考虑了组合性。您可以使用 Recharts 组件构建图表，并仅在需要的地方引入自定义组件（如 ChartTooltip）。

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 版本时，您可以按照官方升级路径来升级您的图表。

这些组件完全属于您.

安装


pnpm dlx shadcn@latest add chart

您的第一个图表

让我们构建您的第一个图表。我们将构建一个柱状图，并添加网格、坐标轴、提示框和图例。

首先定义您的数据

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

注意：您的数据可以是任何格式。您不必局限于以下数据结构。使用 dataKey 属性将您的数据映射到图表中。

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 },
]

定义图表配置

图表配置包含图表的配置信息。在这里，您可以放置人类可读的字符串，例如标签、图标和用于主题化的颜色令牌。

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 组件构建您的图表了。

重要：记得在 ChartContainer 组件上设置 min-h-[VALUE]。这是图表实现响应式所必需的。

"use client"

import { ChartContainer, type ChartConfig } from "@/components/ui/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"

添加坐标轴

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

导入 `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"

到目前为止，我们只使用了 Recharts 的组件。得益于 chart 组件中的一些自定义设置，它们开箱即用效果非常好。

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

导入 `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 {

悬停即可查看提示框。很简单，对吧？仅需两个组件，我们就拥有了一个美观的提示框。

添加图例 (Legend)

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

导入 `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 {

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

图表配置

图表配置是您定义图表标签、图标和颜色的地方。

它特意与图表数据解耦。

这使您可以在图表之间共享配置和颜色令牌。对于数据或颜色令牌位于远程或以不同格式存储的情况，它也可以独立工作。

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

主题

图表具有内置的主题支持。您可以使用 CSS 变量（推荐）或任何颜色格式的颜色值，例如 hex、hsl 或 oklch。

CSS 变量

在您的 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

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

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

使用颜色

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

组件

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

图表数据

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

图表提示框包含标签、名称、指示器和数值。您可以组合使用这些项来自定义您的提示框。

标签

页面浏览量

桌面端

186

移动端

名称

Chrome

1,286

Firefox

1,000

页面浏览量

桌面端

12,486

指示器

Chrome

1,286

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

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

Chart 自带 <ChartTooltip> 和 <ChartTooltipContent> 组件。您可以使用这两个组件为您的图表添加自定义提示框。

components/example-chart.tsx

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

components/example-chart.tsx

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

属性

使用以下属性来自定义提示框。

属性	类型	描述
`labelKey`	string	用于标签的配置或数据键。
`nameKey`	string	用于名称的配置或数据键。
`indicator`	`dot`、`line` 或 `dashed`	提示框的指示器样式。
`hideLabel`	布尔值	是否隐藏标签。
`hideIndicator`	布尔值	是否隐藏指示器。

颜色

颜色会自动从图表配置中引用。

自定义

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

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 用于提示框名称。

图例

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

components/example-chart.tsx

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

components/example-chart.tsx

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

颜色

颜色会自动从图表配置中引用。

自定义

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

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 作为图例名称。

可访问性

您可以开启 accessibilityLayer 属性，为您的图表添加辅助功能层。

此属性为您的图表增加了键盘访问和屏幕阅读器支持。

components/example-chart.tsx

<LineChart accessibilityLayer />

RTL (从右至左)

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

"use client"

import {

Carousel Checkbox

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。

图表

组件

安装

您的第一个图表

首先定义您的数据

定义图表配置

构建您的图表

添加网格

导入 `CartesianGrid` 组件。

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

添加坐标轴

导入 `XAxis` 组件。

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

添加提示框 (Tooltip)

导入 `ChartTooltip` 和 `ChartTooltipContent` 组件。

将这些组件添加到您的图表中。

添加图例 (Legend)

导入 `ChartLegend` 和 `ChartLegendContent` 组件。

将这些组件添加到您的图表中。

图表配置

主题

CSS 变量

在您的 CSS 文件中定义颜色

将颜色添加到您的 `chartConfig`

hex, hsl 或 oklch

使用颜色

组件

图表数据

Tailwind

工具提示

属性

颜色

自定义

图例

颜色

自定义

可访问性

RTL (从右至左)

图表

组件

安装

您的第一个图表

首先定义您的数据

定义图表配置

构建您的图表

添加网格

导入 CartesianGrid 组件。

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

添加坐标轴

导入 XAxis 组件。

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

添加提示框 (Tooltip)

导入 ChartTooltip 和 ChartTooltipContent 组件。

将这些组件添加到您的图表中。

添加图例 (Legend)

导入 ChartLegend 和 ChartLegendContent 组件。

将这些组件添加到您的图表中。

图表配置

主题

CSS 变量

在您的 CSS 文件中定义颜色

将颜色添加到您的 chartConfig

hex, hsl 或 oklch

使用颜色

组件

图表数据

Tailwind

工具提示

属性

颜色

自定义

图例

颜色

自定义

可访问性

RTL (从右至左)

导入 `CartesianGrid` 组件。

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

导入 `XAxis` 组件。

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

导入 `ChartTooltip` 和 `ChartTooltipContent` 组件。

导入 `ChartLegend` 和 `ChartLegendContent` 组件。

将颜色添加到您的 `chartConfig`