RadialChart

RadialChartは、複数のデータを比較するための放射状チャートを描画するコンポーネントです。

インポート

pnpm add @yamada-ui/charts

Copied!

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

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

Copied!

使い方

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

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} />

Copied!

サイズを変更する

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <RadialChart data={data} size="sm" />
    <RadialChart data={data} size="md" />
    <RadialChart data={data} size="lg" />
    <RadialChart data={data} size="full" />
  </VStack>
)

Copied!

凡例を表示する

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

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <RadialChart data={data} withLegend />

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

Copied!

間隔を調整する

間隔を調整する場合は、radialBarPropsにbarCategoryGapを設定します。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <RadialChart
    data={data}
    interRadius={30}
    chartProps={{
      barCategoryGap: "30%",
    }}
  />
)

Copied!

内半径、外半径を調整する

内半径を調整する場合はinnerRadiusに、外半径を調整する場合はouterRadiusにパーセンテージまたは数値を設定します。

パーセンテージを設定した場合は、チャートの高さに対する割合として計算されます。
数値を設定した場合は、半径のpxとして計算されます。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <RadialChart data={data} innerRadius="30%" />
    <RadialChart data={data} outerRadius="70%" />
  </VStack>
)

Copied!

開始、終了の角度を調整する

開始の角度を調整する場合はstartAngleに、終了の角度を調整する場合はendAngleに角度を設定します。

3時の方向を0度として反時計回りに進みます。時計回りにしたい場合は、マイナスの値を設定してください。
デフォルト値は12時から時計回りにするため、startAngleに90、endAngleに-180を設定しています。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} startAngle={180} endAngle={0} />

Copied!

ラベルを表示する

ラベルを表示する場合は、labelListPropsに表示したいラベルの場所と値を配列で設定します。

編集可能な例

const data: CellProps[] = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <RadialChart
    data={data}
    innerRadius={50}
    endAngle={-225}
    labelListProps={[
      {
        position: "insideStart",
        dataKey: "name",
      },
      {
        position: "insideEnd",
        dataKey: "value",
      },
    ]}
  />
)

Copied!

ツールチップに表示するデータを切り替える

ツールチップに表示するデータを切り替える場合は、tooltipDataSourceにallまたはsegmentを設定します。デフォルトは、allです。

編集可能な例

const data: CellProps[] = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} tooltipDataSource="segment" />

Copied!

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

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

編集可能な例

const data: CellProps[] = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} withTooltip={false} />

Copied!

フォーマットする

ツールチップの値をフォーマットする場合は、valueFormatterを使います。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} valueFormatter={(value) => `${value}P`} />

Copied!

透明度を調整する

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

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return <RadialChart data={data} fillOpacity={[0.8, 0.7]} />

Copied!

グリッドを表示にする

グリッドを表示にする場合は、withPolarGridをtrueに設定します。

グリッドの形状を変更する場合は、polarGridProps.gridTypeに"polygon"または"circle"を設定します。デフォルトは、"polygon"です。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <VStack>
    <RadialChart data={data} withPolarGrid endAngle={-270} />
    <RadialChart
      data={data}
      withPolarGrid
      endAngle={-270}
      polarGridProps={{ gridType: "circle" }}
    />
  </VStack>
)

Copied!

背景を表示する

背景を表示する場合は、radialBarProps.backgroundにfillを設定します。

編集可能な例

const data = useMemo(
  () => [
    { name: "HP", value: 106, color: "green.500" },
    { name: "こうげき", value: 90, color: "red.500" },
    { name: "ぼうぎょ", value: 130, color: "blue.500" },
    { name: "とくこう", value: 90, color: "purple.500" },
    { name: "とくぼう", value: 154, color: "orange.500" },
    { name: "すばやさ", value: 110, color: "cyan.500" },
  ],
  [],
)

return (
  <RadialChart
    data={data}
    radialBarProps={{
      background: { fill: ["blackAlpha.200", "whiteAlpha.100"] },
    }}
  />
)

Copied!

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

前RadarChart 次Carousel