AreaChart

AreaChart is a component for drawing area charts to compare multiple sets of data.

Import

pnpm add @yamada-ui/charts

Copied!

@yamada-ui/charts is not included in @yamada-ui/react, so it needs to be installed separately.

import { AreaChart } from "@yamada-ui/charts"

Copied!

Usage

AreaChart internally uses Recharts.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <AreaChart data={data} series={series} dataKey="name" />

Copied!

Change Size

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" size="sm" />
    <AreaChart data={data} series={series} dataKey="name" size="md" />
    <AreaChart data={data} series={series} dataKey="name" size="lg" />
    <AreaChart data={data} series={series} dataKey="name" size="full" />
  </VStack>
)

Copied!

Stack

To stack, set type to "stacked".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <AreaChart data={data} series={series} dataKey="name" type="stacked" />

Copied!

Make Proportional

To stack proportionally, set type to "percent".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <AreaChart data={data} series={series} dataKey="name" type="percent" />

Copied!

Change Curve

To change the curve, set curveType to "monotone", "bump", etc. The default is "monotone".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      curveType="monotone"
    />
    <AreaChart data={data} series={series} dataKey="name" curveType="bump" />
    <AreaChart data={data} series={series} dataKey="name" curveType="linear" />
    <AreaChart data={data} series={series} dataKey="name" curveType="natural" />
    <AreaChart data={data} series={series} dataKey="name" curveType="step" />
    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      curveType="stepBefore"
    />
    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      curveType="stepAfter"
    />
  </VStack>
)

Copied!

Change Direction

To change the direction, set layoutType to "horizontal" or "vertical". The default is "horizontal".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart data={data} series={series} dataKey="name" layoutType="vertical" />
)

Copied!

Display Legend

To display the legend, set withLegend to true. To change the position of the legend, set legendProps.verticalAlign to "bottom", etc.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" withLegend />

    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      withLegend
      legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }}
    />
  </VStack>
)

Copied!

Display Label

To display label, set xAxisLabel or yAxisLabel with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart
    data={data}
    series={series}
    dataKey="name"
    xAxisLabel="ポケモン"
    yAxisLabel="ステータス"
  />
)

Copied!

Display Reference Line

To display a reference line, set referenceLineProps with props.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart
    data={data}
    series={series}
    dataKey="name"
    referenceLineProps={[{ y: 30, label: "Avg.", color: "red.500" }]}
  />
)

Copied!

Disable Gradient

To disable the gradient, set withGradient to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart data={data} series={series} dataKey="name" withGradient={false} />
)

Copied!

Hide Dots

To hide dots, set withDots or withActiveDots to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart
    data={data}
    series={series}
    dataKey="name"
    withDots={false}
    withActiveDots={false}
  />
)

Copied!

To hide the tooltip, set withTooltip to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart data={data} series={series} dataKey="name" withTooltip={false} />
)

Copied!

Hide Axis

To hide the axis, set withYAxis or withXAxis to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" withYAxis={false} />
    <AreaChart data={data} series={series} dataKey="name" withXAxis={false} />
  </VStack>
)

Copied!

Change Grid Layout

To change the grid layout, set gridAxis to "x", "y", "xy", or "none".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" gridAxis="x" />
    <AreaChart data={data} series={series} dataKey="name" gridAxis="y" />
    <AreaChart data={data} series={series} dataKey="name" gridAxis="xy" />
    <AreaChart data={data} series={series} dataKey="name" gridAxis="none" />
  </VStack>
)

Copied!

Mark Ticks

To mark ticks, set tickLine to "x", "y", "xy", or "none".

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" tickLine="x" />
    <AreaChart data={data} series={series} dataKey="name" tickLine="y" />
    <AreaChart data={data} series={series} dataKey="name" tickLine="xy" />
    <AreaChart data={data} series={series} dataKey="name" tickLine="none" />
  </VStack>
)

Copied!

Synchronize

To synchronize the behavior of the charts, set a common string for syncId of each chart.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart data={data} series={series} dataKey="name" syncId="syncId" />
    <AreaChart data={data} series={series} dataKey="name" syncId="syncId" />
  </VStack>
)

Copied!

Add Unit

To add a unit, set unit with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return <AreaChart data={data} series={series} dataKey="name" unit="P" />

Copied!

Format

To format tooltip labels, use labelFormatter, and to format values, use valueFormatter.
To format axis labels, use xAxisTickFormatter or yAxisTickFormatter.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      labelFormatter={(value) => `ポケモン: ${value}`}
      valueFormatter={(value) => `${value}P`}
    />
    <AreaChart
      data={data}
      series={series}
      dataKey="name"
      xAxisTickFormatter={(value) => `ポケモン: ${value}`}
      yAxisTickFormatter={(value) => `${value}P`}
    />
  </VStack>
)

Copied!

Adjust Opacity

To adjust opacity, set fillOpacity with a number or an array of numbers.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500" },
    { dataKey: "こうげき", color: "red.500" },
    { dataKey: "ぼうぎょ", color: "blue.500" },
    { dataKey: "とくこう", color: "purple.500" },
    { dataKey: "とくぼう", color: "orange.500" },
    { dataKey: "すばやさ", color: "cyan.500" },
  ],
  [],
)

return (
  <AreaChart
    data={data}
    series={series}
    dataKey="name"
    fillOpacity={[0.8, 0.7]}
  />
)

Copied!

Adjust Dashed Line

To adjust the dashed line, set strokeDasharray with a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "ゼニガメ",
      HP: 44,
      こうげき: 48,
      ぼうぎょ: 65,
      とくこう: 50,
      とくぼう: 64,
      すばやさ: 43,
    },
    {
      name: "ヒトカゲ",
      HP: 39,
      こうげき: 52,
      ぼうぎょ: 43,
      とくこう: 60,
      とくぼう: 50,
      すばやさ: 65,
    },
    {
      name: "フシギダネ",
      HP: 45,
      こうげき: 49,
      ぼうぎょ: 49,
      とくこう: 65,
      とくぼう: 65,
      すばやさ: 45,
    },
  ],
  [],
)

const series: AreaProps[] = useMemo(
  () => [
    { dataKey: "HP", color: "green.500", strokeDasharray: "5 5" },
    { dataKey: "こうげき", color: "red.500", strokeDasharray: "5 5" },
    { dataKey: "ぼうぎょ", color: "blue.500", strokeDasharray: "5 5" },
    { dataKey: "とくこう", color: "purple.500", strokeDasharray: "5 5" },
    { dataKey: "とくぼう", color: "orange.500", strokeDasharray: "5 5" },
    { dataKey: "すばやさ", color: "cyan.500", strokeDasharray: "5 5" },
  ],
  [],
)

return <AreaChart data={data} series={series} dataKey="name" />

Copied!

Edit this page on GitHub

PreviousLineChart NextBarChart

AreaChart

Usage

Change Size

Stack

Make Proportional

Change Curve

Change Direction

Display Legend

Display Label

Display Reference Line

Disable Gradient

Hide Dots

Hide Tooltip

Hide Axis

Change Grid Layout

Mark Ticks

Synchronize

Add Unit

Format

Adjust Opacity

Adjust Dashed Line