DonutChart
DonutChartは、複数のデータを比較するためのドーナツチャートを描画するコンポーネントです。
インポート
pnpm add @yamada-ui/charts
@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { DonutChart } from "@yamada-ui/charts"
使い方
DonutChartは、内部的にRechartsを使用しています。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} />
サイズを変更する
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} size="sm" /> <DonutChart data={mewtwo} size="md" /> <DonutChart data={mewtwo} size="lg" /> </VStack> )
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} withLegend /> <DonutChart data={mewtwo} withLegend legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }} /> </VStack> )
間隔を調整する
間隔を調整する場合は、paddingAngleに数値を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} paddingAngle={15} />
内半径、外半径を調整する
内半径を調整する場合はinnerRadiusに、外半径を調整する場合はouterRadiusにパーセンテージまたは数値を設定します。
パーセンテージを設定した場合は、チャートの高さに対する割合として計算されます。
数値を設定した場合は、半径のpxとして計算されます。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} innerRadius="70%" outerRadius="80%" />
開始、終了の角度を調整する
開始の角度を調整する場合はstartAngleに、終了の角度を調整する場合はendAngleに角度を設定します。
3時の方向を0度として反時計回りに進みます。時計回りにしたい場合は、マイナスの値を設定してください。
デフォルト値は12時から時計回りにするため、startAngleに90、endAngleに-270を設定しています。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} startAngle={90} endAngle={225} />
ラベルを表示する
ラベルを表示する場合は、withLabelsをtrueに設定します。
また、ラベルまでのガイドを表示する場合はwithLabelLinesをtrueに設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels withLabelLines />
ラベルの表示位置を調整する
ラベルを表示位置を調整する場合は、labelOffsetに数値を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels withLabelLines labelOffset={15} />
ラベルを割合にする
ラベルの表示を割合にする場合は、isPercentをtrueに設定します。デフォルトは、falseです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withLabels isPercent />
ツールチップに表示するデータを切り替える
ツールチップに表示するデータを切り替える場合は、tooltipDataSourceにallまたはsegmentを設定します。デフォルトは、allです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} tooltipDataSource="segment" />
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} withTooltip={false} />
フォーマットする
ツールチップの値をフォーマットする場合は、valueFormatterを使います。
ラベルの値をフォーマットする場合は、labelFormatterを使います。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <DonutChart data={mewtwo} valueFormatter={(value) => `${value}P`} /> <DonutChart data={mewtwo} withLabels labelFormatter={(value) => `${value}P`} /> </VStack> )
透明度を調整する
透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <DonutChart data={mewtwo} fillOpacity={[0.8, 0.7]} />
中央にテキストを表示する
中央にテキストを表示する場合は、labelPropsにpropsを設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <DonutChart data={mewtwo} labelProps={{ value: "DonutChart", position: "center", fill: ["black", "white"], fontSize: "md", fontWeight: "bold", }} /> )
GitHubでこのページを編集する