RadarChart

RadarChartは、複数のデータを比較するためのレーダーチャートを描画するコンポーネントです。

インポート

pnpm add @yamada-ui/charts

Copied!

@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

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

Copied!

使い方

RadarChartは、内部的にRechartsを使用しています。

編集可能な例

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!

サイズを変更する

編集可能な例

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!

凡例を表示する

凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。

編集可能な例

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!

点を表示する

点を表示する場合は、withDotsまたはwithActiveDotsをtrueに設定します。

編集可能な例

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!

半径軸を表示する

半径軸を表示する場合は、withPolarRadiusAxisをtrueに設定します。

編集可能な例

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!

軸を非表示にする

軸を非表示にする場合は、withPolarAngleAxisをfalseに設定します。デフォルトでは、trueです。

編集可能な例

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!

グリッドを非表示にする

グリッドを非表示にする場合は、withPolarGridをfalseに設定します。デフォルトは、trueです。

編集可能な例

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!

グリッドを丸くする

グリッドを丸くする場合は、polarGridProps.gridTypeを"circle"に設定します。

編集可能な例

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!

ツールチップを非表示にする

ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。

編集可能な例

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!

フォーマットする

ツールチップの値をフォーマットする場合は、valueFormatterを使います。
軸のラベルをフォーマットする場合は、polarAngleAxisTickFormatterを使います。
半径軸の値をフォーマットする場合は、polarRadiusAxisTickFormatterを使います。

編集可能な例

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!

透明度を調整する

透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。

編集可能な例

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!

破線を調整する

破線を調整する場合は、strokeDasharrayに文字列を設定します。

編集可能な例

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!

編集可能な例

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!

GitHubでこのページを編集する

前DonutChart 次RadialChart