柱状图

用于使用不同高度或长度的矩形条显示分类数据

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { allocation: 60, type: "Stock" },
      { allocation: 45, type: "Crypto" },
      { allocation: 12, type: "ETF" },
      { allocation: 4, type: "Cash" },
    ],
    series: [{ name: "allocation", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis axisLine={false} tickLine={false} dataKey={chart.key("type")} />
        <YAxis
          axisLine={false}
          tickLine={false}
          domain={[0, 100]}
          tickFormatter={(value) => `${value}%`}
        />
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

用法

¥Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

<Chart.Root>
  <BarChart>
    <CartesianGrid />
    <XAxis />
    <YAxis />
    <Bar />
  </BarChart>
</Chart.Root>

示例

¥Examples

条形颜色

¥Bar color

以下是根据数据为条形着色的示例。

¥Here's an example of coloring the bars based on the data.

使用 recharts 中的 Cell 组件为柱状图着色。

<Bar dataKey="allocation">
  <Cell fill="red" />
</Bar>

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { allocation: 60, type: "Stock", color: "red.solid" },
      { allocation: 45, type: "Crypto", color: "blue.solid" },
      { allocation: 12, type: "ETF", color: "green.solid" },
      { allocation: 4, type: "Cash", color: "yellow.solid" },
    ],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis axisLine={false} tickLine={false} dataKey={chart.key("type")} />
        <YAxis
          axisLine={false}
          tickLine={false}
          domain={[0, 100]}
          tickFormatter={(value) => `${value}%`}
        />
        <Bar isAnimationActive={false} dataKey={chart.key("allocation")}>
          {chart.data.map((item) => (
            <Cell key={item.type} fill={chart.color(item.color)} />
          ))}
        </Bar>
      </BarChart>
    </Chart.Root>
  )
}

条形标签

¥Bar Label

渲染来自 recharts 的 LabelList 组件以显示柱状图的标签。

¥Render the LabelList component from recharts to display the label of the bar.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  LabelList,
  Legend,
  Tooltip,
  XAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
    ],
    series: [
      { name: "windows", color: "teal.solid" },
      { name: "mac", color: "purple.solid" },
      { name: "linux", color: "blue.solid" },
    ],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stroke={chart.color(item.color)}
            stackId={item.stackId}
          >
            <LabelList
              dataKey={chart.key(item.name)}
              position="top"
              style={{ fontWeight: "600", fill: chart.color("fg") }}
            />
          </Bar>
        ))}
      </BarChart>
    </Chart.Root>
  )
}

格式化程序

¥Formatter

使用 useChart 钩子提供的格式化程序格式化数值轴。

¥Use the formatter provided from the useChart hook to format the value axis.

<YAxis
  tickFormatter={chart.formatNumber({
    style: "currency",
    currency: "USD",
    notation: "compact",
  })}
/>

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { sales: 63000, month: "June" },
      { sales: 72000, month: "July" },
      { sales: 85000, month: "August" },
      { sales: 79000, month: "September" },
      { sales: 90000, month: "October" },
      { sales: 95000, month: "November" },
      { sales: 88000, month: "December" },
    ],
    series: [{ name: "sales", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <YAxis
          axisLine={false}
          tickLine={false}
          tickFormatter={chart.formatNumber({
            style: "currency",
            currency: "USD",
            notation: "compact",
          })}
        />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={0}
          content={<Chart.Tooltip />}
        />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

无间隙

¥No Gap

要消除条形之间的间隙，请在 BarChart 组件上将 barCategoryGap 属性设置为 0。

¥To remove the gap between the bars, set the barCategoryGap prop to 0 on the BarChart component.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { sales: 63000, month: "June" },
      { sales: 72000, month: "July" },
      { sales: 85000, month: "August" },
      { sales: 79000, month: "September" },
      { sales: 90000, month: "October" },
      { sales: 95000, month: "November" },
      { sales: 88000, month: "December" },
    ],
    series: [{ name: "sales", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart barCategoryGap="0" data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stroke={chart.color("bg")}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

填充内容值

¥Fill With Value

组合 recharts 中的 LabelList 和 Cell 组件，使其根据值向上或向下渲染柱状图。

¥Compose the LabelList and Cell components from recharts to render bars upward or downward based on the value.

<Bar dataKey="views">
  <LabelList dataKey="views" position="top" />
  {chart.data.map((item, index) => (
    <Cell key={index} fill={item.views > 0 ? "green" : "red"} />
  ))}
</Bar>

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { name: "Page A", views: 400 },
      { name: "Page B", views: -300 },
      { name: "Page C", views: -200 },
      { name: "Page D", views: 278 },
      { name: "Page E", views: -189 },
      { name: "Page F", views: 239 },
      { name: "Page G", views: 349 },
    ],
    series: [{ name: "views", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data} margin={{ top: 30 }}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            radius={4}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          >
            <LabelList
              position="top"
              dataKey={chart.key("views")}
              offset={10}
              style={{ fontWeight: "500" }}
            />
            {chart.data.map((item) => (
              <Cell
                key={item.name}
                fill={chart.color(item.views > 0 ? "green.solid" : "red.solid")}
              />
            ))}
          </Bar>
        ))}
      </BarChart>
    </Chart.Root>
  )
}

水平

¥Horizontal

将 layout="vertical" 属性传递给 BarChart 组件，以水平方式渲染柱状图。

¥Pass the layout="vertical" prop to the BarChart component to render the bars horizontally.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 180, mac: 86, linux: 124, month: "October" },
      { windows: 185, mac: 91, linux: 126, month: "November" },
    ],
    series: [
      { name: "windows", color: "teal.solid", stackId: "a" },
      { name: "mac", color: "purple.solid", stackId: "a" },
      { name: "linux", color: "blue.solid", stackId: "a" },
    ],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart layout="vertical" data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis type="number" axisLine={false} tickLine={false} />
        <YAxis
          type="category"
          dataKey={chart.key("month")}
          orientation="left"
          stroke={chart.color("border")}
          tickFormatter={(value) =>
            typeof value === "string" ? value.slice(0, 3) : value
          }
        />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Bar
            barSize={30}
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stroke={chart.color(item.color)}
            stackId={item.stackId}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

圆角

¥Rounded

将 radius 属性传递给 Bar 组件，以圆角方式渲染柱状图。

¥Pass the radius prop to the Bar component to render the bars with rounded corners.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { allocation: 60, type: "Stock" },
      { allocation: 45, type: "Crypto" },
      { allocation: 12, type: "ETF" },
      { allocation: 4, type: "Cash" },
    ],
    series: [{ name: "allocation", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data} barSize={40}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis axisLine={false} tickLine={false} dataKey={chart.key("type")} />
        <YAxis
          axisLine={false}
          tickLine={false}
          domain={[0, 100]}
          tickFormatter={(value) => `${value}%`}
        />
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            radius={10}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

范围

¥Range

将一个值数组传递给 dataKey 属性，将会渲染一个范围栏，指示值的上下限。

¥Passing an array of values to the dataKey prop will render a range bar that indicates the lower and upper bounds of the values.

const chart = useChart({
  data: [
    { name: "UK", value: [10, 20] },
    // ...
  ],
})

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { name: "UK", value: [10, 20] },
      { name: "US", value: [15, 25] },
      { name: "EU", value: [5, 18] },
      { name: "JP", value: [12, 30] },
    ],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart
        barSize={100}
        data={chart.data}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid vertical={false} strokeDasharray="3 3" />
        <XAxis dataKey={chart.key("name")} axisLine={false} tickLine={false} />
        <YAxis domain={[0, "dataMax + 5"]} axisLine={false} tickLine={false} />
        <Bar
          tooltipType="none"
          dataKey={chart.key("value")}
          fill={chart.color("teal.solid")}
        />
      </BarChart>
    </Chart.Root>
  )
}

多个

¥Multiple

渲染多个 Bar 组件以创建包含多个系列的柱状图。

¥Render multiple Bar components to create a bar chart with multiple series.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { type: "mobile", poor: 40, fair: 100, good: 200, excellent: 70 },
      { type: "marketing", poor: 15, fair: 40, good: 120, excellent: 90 },
      { type: "social", poor: 70, fair: 135, good: 220, excellent: 180 },
      { type: "ecommerce", poor: 175, fair: 155, good: 75, excellent: 95 },
    ],
    series: [
      { name: "poor", color: "blue.solid" },
      { name: "fair", color: "orange.solid" },
      { name: "good", color: "yellow.solid" },
      { name: "excellent", color: "green.solid" },
    ],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          tickLine={false}
          dataKey={chart.key("type")}
          stroke={chart.color("border")}
        />
        <YAxis tickLine={false} stroke={chart.color("border")} />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="top"
          wrapperStyle={{ paddingLeft: 30 }}
          content={<Chart.Legend orientation="vertical" />}
        />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

图例位置

¥Legend Position

将 layout 属性从 recharts 传递给 Legend 组件以配置图例的位置。

¥Pass the layout prop to the Legend component from recharts to configure the position of the legend.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { category: "Web Server", value: 200, maxValue: 450 },
      { category: "Credit Card", value: 700, maxValue: 900 },
      { category: "Payment", value: 439, maxValue: 500 },
      { category: "API", value: 147, maxValue: 200 },
      { category: "AddToCart", value: 84, maxValue: 100 },
    ],
    series: [
      { name: "value", color: "blue.solid" },
      { name: "maxValue", color: "green.solid" },
    ],
  })

  return (
    <Chart.Root chart={chart} maxH="sm">
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          tickLine={false}
          dataKey={chart.key("category")}
          stroke={chart.color("border")}
        />
        <YAxis tickLine={false} stroke={chart.color("border")} />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend
          layout="vertical"
          align="right"
          verticalAlign="top"
          wrapperStyle={{ paddingLeft: 30 }}
          content={<Chart.Legend orientation="vertical" />}
        />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

百分比

¥Percent

在 BarChart 组件上将 stackOffset 属性设置为 expand，以将值标准化为 100% 来渲染柱状图。

¥Set the stackOffset prop to expand on the BarChart component to render the bars with value normalized to 100%.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
      { windows: 182, mac: 98, linux: 122, month: "June" },
      { windows: 175, mac: 90, linux: 115, month: "August" },
      { windows: 180, mac: 86, linux: 124, month: "October" },
      { windows: 185, mac: 91, linux: 126, month: "November" },
    ],
    series: [
      { name: "windows", color: "teal.solid", stackId: "a" },
      { name: "mac", color: "purple.solid", stackId: "a" },
      { name: "linux", color: "blue.solid", stackId: "a" },
    ],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart stackOffset="expand" data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <YAxis
          stroke={chart.color("border.emphasized")}
          tickFormatter={chart.formatNumber({ style: "percent" })}
        />
        <Tooltip
          cursor={{ fill: chart.color("bg.muted") }}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stroke={chart.color(item.color)}
            stackId={item.stackId}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

堆叠

¥Stacked

渲染多个 Bar 组件，并将它们的 stackId 属性设置为相同的值以堆叠它们。

¥Render multiple Bar components and set their stackId prop to the same value to stack them.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
      { windows: 182, mac: 98, linux: 122, month: "June" },
      { windows: 175, mac: 90, linux: 115, month: "August" },
      { windows: 180, mac: 86, linux: 124, month: "October" },
      { windows: 185, mac: 91, linux: 126, month: "November" },
    ],
    series: [
      { name: "windows", color: "teal.solid", stackId: "a" },
      { name: "mac", color: "purple.solid", stackId: "a" },
      { name: "linux", color: "blue.solid", stackId: "a" },
    ],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stackId={item.stackId}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

堆叠混合

¥Stacked Mix

渲染多个具有不同 stackId 属性的 Bar 组件，以创建一些系列堆叠而一些系列不堆叠的柱状图。

¥Render multiple Bar components with different stackId props to create a bar chart with some series stacked and some not.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
      { windows: 182, mac: 98, linux: 122, month: "June" },
      { windows: 175, mac: 90, linux: 115, month: "August" },
      { windows: 180, mac: 86, linux: 124, month: "October" },
      { windows: 185, mac: 91, linux: 126, month: "November" },
    ],
    series: [
      { name: "windows", color: "teal.solid", stackId: "a" },
      { name: "mac", color: "purple.solid", stackId: "b" },
      { name: "linux", color: "blue.solid", stackId: "b" },
    ],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <Legend content={<Chart.Legend />} />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            stackId={item.stackId}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

参考线

¥Reference Lines

使用 recharts 中的 ReferenceLine 组件引用图表上的特定值。

¥Use the ReferenceLine component from recharts to make reference to a specific value on the chart.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  ReferenceArea,
  ReferenceLine,
  Tooltip,
  XAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { sales: 63000, month: "June" },
      { sales: 72000, month: "July" },
      { sales: 85000, month: "August" },
      { sales: 79000, month: "September" },
      { sales: 90000, month: "October" },
      { sales: 95000, month: "November" },
      { sales: 88000, month: "December" },
    ],
    series: [{ name: "sales", color: "blue.solid" }],
  })

  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} vertical={false} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("month")}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip />}
        />
        <ReferenceArea
          y1={76000}
          y2={90000}
          fill={chart.color("red.muted")}
          fillOpacity={0.4}
          label={{
            value: "top line",
            position: "insideTopLeft",
            fill: chart.color("red.fg"),
          }}
        />
        <ReferenceLine
          y={80000}
          stroke={chart.color("red.fg")}
          strokeDasharray="3 3"
        />
        {chart.series.map((item) => (
          <Bar
            isAnimationActive={false}
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            fillOpacity={0.64}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

直方图

¥Histogram

对于数学高手，你可以编写柱状图来创建直方图。

¥For those mathematics wiz, you can compose the barchart to create a histogram.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"

const Demo = () => {
  const chart = useChart({ data })
  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart
        data={chart.data}
        margin={{ top: 20, right: 20, bottom: 20, left: 40 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke={chart.color("border")} />
        <XAxis
          dataKey="from"
          ticks={ticks}
          label={{ value: "Value Range", position: "insideBottom", offset: -5 }}
        />
        <YAxis
          label={{ value: "Frequency", angle: -90, position: "insideLeft" }}
        />
        <Tooltip
          formatter={(value) => [`${value}`, "Frequency"]}
          labelFormatter={(label) => {
            const bin = data.find((item) => item.from === Number(label))
            return bin ? `Range: ${bin.from}-${bin.to}` : ""
          }}
        />
        <Bar
          dataKey="value"
          fill={chart.color("teal.solid")}
          name="Frequency"
        />
      </BarChart>
    </Chart.Root>
  )
}

const data = [
  { from: 0, to: 10, value: 0 },
  { from: 10, to: 20, value: 10 },
  { from: 20, to: 30, value: 30 },
  { from: 30, to: 40, value: 50 },
  { from: 40, to: 50, value: 100 },
  { from: 50, to: 60, value: 200 },
  { from: 60, to: 70, value: 120 },
  { from: 70, to: 80, value: 220 },
  { from: 80, to: 90, value: 300 },
  { from: 90, to: 100, value: 320 },
  { from: 100, to: 110, value: 400 },
  { from: 110, to: 120, value: 470 },
  { from: 120, to: 130, value: 570 },
  { from: 130, to: 140, value: 810 },
  { from: 140, to: 150, value: 720 },
  { from: 150, to: 160, value: 810 },
  { from: 160, to: 170, value: 750 },
  { from: 170, to: 180, value: 810 },
  { from: 180, to: 190, value: 700 },
  { from: 190, to: 200, value: 530 },
  { from: 200, to: 210, value: 380 },
  { from: 210, to: 220, value: 410 },
  { from: 220, to: 230, value: 250 },
  { from: 230, to: 240, value: 170 },
  { from: 240, to: 250, value: 120 },
  { from: 250, to: 260, value: 100 },
  { from: 260, to: 270, value: 90 },
  { from: 270, to: 280, value: 120 },
  { from: 280, to: 290, value: 70 },
  { from: 290, to: 300, value: 55 },
  { from: 300, to: 310, value: 40 },
  { from: 310, to: 320, value: 20 },
  { from: 320, to: 330, value: 0 },
]

const ticks = Array.from({ length: 12 }, (_, i) => i * 30)

头像刻度

¥Avatar Ticks

以下是利用 svg foreignObject 将图片渲染为 XAxis 标记的示例。

¥Here's an example of rendering images as the XAxis tick by leveraging svg foreignObject.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

const data = [
  { name: "Alice", value: 400, avatar: "https://i.pravatar.cc/50?img=1" },
  { name: "Bob", value: 300, avatar: "https://i.pravatar.cc/50?img=2" },
  { name: "Charlie", value: 200, avatar: "https://i.pravatar.cc/50?img=5" },
  { name: "David", value: 278, avatar: "https://i.pravatar.cc/50?img=4" },
]

interface AvatarTickProps {
  x: number
  y: number
  index: number
}

const AvatarTicks = (props: Partial<AvatarTickProps>) => {
  const { x, y, index } = props as AvatarTickProps
  const avatarUrl = data[index].avatar
  return (
    <foreignObject x={x - 15} y={y} width={50} height={50}>
      <img
        src={avatarUrl}
        alt="avatar"
        style={{ width: 30, height: 30, borderRadius: "50%" }}
      />
    </foreignObject>
  )
}

const Demo = () => {
  const chart = useChart({
    data,
    series: [{ name: "value", color: "teal.solid" }],
  })
  return (
    <Chart.Root maxH="sm" chart={chart}>
      <BarChart data={chart.data} margin={{ bottom: 20 }}>
        <XAxis
          dataKey="name"
          tick={<AvatarTicks />}
          stroke={chart.color("border.emphasized")}
        />
        <YAxis stroke={chart.color("border.emphasized")} />
        {chart.series.map((item) => (
          <Bar
            key={item.name}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
          />
        ))}
      </BarChart>
    </Chart.Root>
  )
}

K 线图

¥Candlestick

将柱状图与 ErrorBar 和 Bar 组件组合，以创建 K 线图。

¥Combine the bar chart with the ErrorBar and Bar components to create a candlestick chart.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ErrorBar,
  XAxis,
  YAxis,
} from "recharts"

const Demo = () => {
  const chart = useChart({
    data,
    series: [{ name: "open_close", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxH="md" chart={chart}>
      <BarChart data={chart.data}>
        <CartesianGrid stroke={chart.color("border.muted")} />
        <XAxis
          axisLine={false}
          tickLine={false}
          dataKey={chart.key("date")}
          tickFormatter={chart.formatDate({ month: "short", day: "2-digit" })}
        />
        <YAxis
          orientation="right"
          axisLine={false}
          tickLine={false}
          domain={["dataMin - 0.5", "dataMax + 0.5"]}
          tickFormatter={chart.formatNumber({ maximumFractionDigits: 1 })}
        />
        <Bar
          isAnimationActive={false}
          barSize={40}
          dataKey={chart.key("open_close")}
          fill={chart.color("teal.solid")}
        >
          {data.map((item) => (
            <Cell
              key={item.date}
              fill={
                item.open_close[0] > item.open_close[1]
                  ? chart.color("red.solid")
                  : chart.color("green.solid")
              }
            />
          ))}
          <ErrorBar
            dataKey={(obj) => [
              obj.open_close[0] - obj.high_low[0],
              obj.high_low[1] - obj.open_close[1],
            ]}
            width={2}
            stroke={chart.color("fg")}
          />
        </Bar>
      </BarChart>
    </Chart.Root>
  )
}

const data = [
  {
    date: "2024-01-01",
    open_close: [185.96, 185.64],
    high_low: [186.74, 185.19],
  },
  {
    date: "2024-01-02",
    open_close: [184.22, 185.14],
    high_low: [185.15, 182.73],
  },
  {
    date: "2024-01-03",
    open_close: [184.22, 181.42],
    high_low: [184.26, 181.12],
  },
  {
    date: "2024-01-04",
    open_close: [181.99, 182.68],
    high_low: [183.0872, 181.59],
  },
  {
    date: "2024-01-05",
    open_close: [182.15, 185.56],
    high_low: [185.66, 181.5],
  },
  {
    date: "2024-01-08",
    open_close: [184.51, 185.8],
    high_low: [186.01, 183.98],
  },
  {
    date: "2024-01-09",
    open_close: [186.19, 185.64],
    high_low: [187.05, 184.74],
  },
  {
    date: "2024-01-10",
    open_close: [186.09, 186.19],
    high_low: [187.3499, 185.36],
  },
  {
    date: "2024-01-11",
    open_close: [186.54, 185.59],
    high_low: [187.05, 185.08],
  },
  {
    date: "2024-01-12",
    open_close: [185.34, 185.92],
    high_low: [186.565, 184.455],
  },
]

合成

¥Composition

以下是组合 BarChart、Card 和 SegmentGroup 组件的示例。

¥Here's an example of composing the BarChart, Card and SegmentGroup components.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Card, SegmentGroup } from "@chakra-ui/react"
import * as React from "react"
import { Bar, BarChart, XAxis } from "recharts"

type CurrentKey = "windows" | "mac" | "linux"

const Demo = () => {
  const [currentKey, setCurrentKey] = React.useState<CurrentKey>("windows")

  const chart = useChart({
    data: [
      { windows: 186, mac: 80, linux: 120, month: "January" },
      { windows: 165, mac: 95, linux: 110, month: "February" },
      { windows: 190, mac: 87, linux: 125, month: "March" },
      { windows: 195, mac: 88, linux: 130, month: "May" },
      { windows: 182, mac: 98, linux: 122, month: "June" },
      { windows: 175, mac: 90, linux: 115, month: "August" },
      { windows: 180, mac: 86, linux: 124, month: "October" },
      { windows: 185, mac: 91, linux: 126, month: "November" },
    ],
    series: [
      { name: "windows", color: "teal.solid" },
      { name: "mac", color: "purple.solid" },
      { name: "linux", color: "blue.solid" },
    ],
  })

  const totals = chart.data.reduce(
    (acc, item) => {
      return {
        windows: acc.windows + item.windows,
        mac: acc.mac + item.mac,
        linux: acc.linux + item.linux,
      }
    },
    { windows: 0, mac: 0, linux: 0 },
  )

  const series = chart.getSeries({ name: currentKey })

  const formatNumber = chart.formatNumber({
    style: "decimal",
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  })

  return (
    <Card.Root maxW="md">
      <Card.Header alignItems="flex-start">
        <Card.Title>OS Downloads</Card.Title>
        <SegmentGroup.Root
          size="xs"
          value={currentKey}
          onValueChange={(e) => setCurrentKey(e.value as CurrentKey)}
        >
          <SegmentGroup.Indicator />
          <SegmentGroup.Items
            items={[
              {
                value: "windows",
                label: `Windows (${formatNumber(totals.windows)})`,
              },
              { value: "mac", label: `Mac (${formatNumber(totals.mac)})` },
              {
                value: "linux",
                label: `Linux (${formatNumber(totals.linux)})`,
              },
            ]}
          />
        </SegmentGroup.Root>
      </Card.Header>
      <Card.Body>
        <Chart.Root height="10rem" chart={chart}>
          <BarChart data={chart.data}>
            <XAxis
              axisLine={false}
              tickLine={false}
              dataKey={chart.key("month")}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <Bar
              dataKey={chart.key(currentKey)}
              fill={chart.color(series?.color)}
            />
          </BarChart>
        </Chart.Root>
      </Card.Body>
    </Card.Root>
  )
}

面积图

条形列表

柱状图

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

OS Downloads

用法