RadarChart

RadarChart is a component for drawing radar 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 { RadarChart } from "@yamada-ui/charts"

Copied!

Usage

RadarChart internally uses Recharts.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

Copied!

Change Size

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

Copied!

Display Legend

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

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

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

Copied!

Display Dots

To display dots, set withDots or withActiveDots to true.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

Copied!

Display Polar Radius Axis

To display the polar radius axis, set withPolarRadiusAxis to true.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <RadarChart data={data} series={series} dataKey="name" withPolarRadiusAxis />
)

Copied!

Hide Axis

To hide the axis, set withPolarAngleAxis to false. By default, it is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <RadarChart
    data={data}
    series={series}
    dataKey="name"
    withPolarAngleAxis={false}
  />
)

Copied!

Hide Grid

To hide the grid, set withPolarGrid to false. The default is true.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <RadarChart
    data={data}
    series={series}
    dataKey="name"
    withPolarGrid={false}
  />
)

Copied!

Make Grid Circular

To make the grid circular, set polarGridProps.gridType to "circle".

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <RadarChart
    data={data}
    series={series}
    dataKey="name"
    polarGridProps={{
      gridType: "circle",
    }}
  />
)

Copied!

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

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

Copied!

Format

To format tooltip values, use valueFormatter.
To format axis labels, use polarAngleAxisTickFormatter.
To format values on the radius axis, use polarRadiusAxisTickFormatter.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <VStack>
    <RadarChart
      data={data}
      series={series}
      dataKey="name"
      valueFormatter={(value) => `${value}P`}
    />
    <RadarChart
      data={data}
      series={series}
      dataKey="name"
      polarAngleAxisTickFormatter={(value) => `-${value}-`}
    />
    <RadarChart
      data={data}
      series={series}
      dataKey="name"
      withPolarRadiusAxis
      polarRadiusAxisTickFormatter={(value) => `${value}P`}
    />
  </VStack>
)

Copied!

Adjust Opacity

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

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

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

Copied!

Adjust Dashed Lines

To adjust dashed lines, set strokeDasharray to a string.

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500" },
    { dataKey: "ホウオウ", color: "red.500" },
  ],
  [],
)

return (
  <RadarChart
    data={data}
    series={series}
    dataKey="name"
    strokeDasharray="5 5"
  />
)

Copied!

Editable example

const data = useMemo(
  () => [
    {
      name: "HP",
      ルギア: 106,
      ホウオウ: 106,
    },
    {
      name: "こうげき",
      ルギア: 90,
      ホウオウ: 130,
    },
    {
      name: "ぼうぎょ",
      ルギア: 130,
      ホウオウ: 90,
    },
    {
      name: "とくこう",
      ルギア: 90,
      ホウオウ: 110,
    },
    {
      name: "とくぼう",
      ルギア: 154,
      ホウオウ: 154,
    },
    {
      name: "すばやさ",
      ルギア: 110,
      ホウオウ: 90,
    },
  ],
  [],
)

const series: RadarProps[] = useMemo(
  () => [
    { dataKey: "ルギア", color: "blue.500", strokeDasharray: "5 5" },
    { dataKey: "ホウオウ", color: "red.500", strokeDasharray: "5 5" },
  ],
  [],
)

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

Copied!

Edit this page on GitHub

PreviousDonutChart NextRadialChart

RadarChart

Usage

Change Size

Display Legend

Display Dots

Display Polar Radius Axis

Hide Axis

Hide Grid

Make Grid Circular

Hide Tooltip

Format

Adjust Opacity

Adjust Dashed Lines