AreaChart
AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。
インポート
pnpm add @yamada-ui/charts
@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { AreaChart } from "@yamada-ui/charts"
使い方
AreaChartは、内部的にRechartsを使用しています。
編集可能な例
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" />
サイズを変更する
編集可能な例
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> )
積み上げる
積み上げる場合は、typeに"stacked"を設定します。
編集可能な例
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" />
割合にする
スタックする場合は、typeに"percent"を設定します。
編集可能な例
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" />
曲線を変更する
曲線を変更する場合は、curveTypeに"monotone"や"bump"などを設定します。デフォルトは、"monotone"です。
編集可能な例
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> )
方向を変更する
方向を変更する場合は、layoutTypeに"horizontal"または"vertical"を設定します。デフォルトは、"horizontal"です。
編集可能な例
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" /> )
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。
編集可能な例
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> )
ラベルを表示する
ラベルを表示する場合は、xAxisLabelまたはyAxisLabelに文字列を設定します。
編集可能な例
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="ステータス" /> )
基準線を表示する
基準線を表示する場合は、referenceLinePropsにpropsを設定します。
編集可能な例
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" }]} /> )
グラデーションを無効にする
グラデーションを無効にする場合は、withGradientをfalseに設定します。デフォルトは、trueです。
編集可能な例
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} /> )
点を非表示にする
点を非表示にする場合は、withDotsまたはwithActiveDotsをfalseに設定します。デフォルトは、trueです。
編集可能な例
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} /> )
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
編集可能な例
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} /> )
軸を非表示にする
軸を非表示にする場合は、withYAxisまたはwithXAxisをfalseに設定します。デフォルトは、trueです。
編集可能な例
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> )
グリッドのレイアウトを変更する
グリッドのレイアウトを変更する場合は、gridAxisに"x", "y", "xy"または"none"を設定します。
編集可能な例
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> )
しるしをつける
しるしをつける場合は、tickLineに"x", "y", "xy"または"none"を設定します。
編集可能な例
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> )
同期させる
グラフの動作を同期させる場合は、互いのグラフのsyncIdに共通の文字列を設定します。
編集可能な例
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> )
単位をつける
単位をつける場合は、unitに文字列を設定します。
編集可能な例
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" />
フォーマットする
ツールチップのラベルをフォーマットする場合はlabelFormatterを、値をフォーマットする場合は、valueFormatterを使います。
軸のラベルをフォーマットする場合は、xAxisTickFormatterまたはyAxisTickFormatterを使います。
編集可能な例
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> )
透明度を調整する
透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。
編集可能な例
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]} /> )
破線を調整する
破線を調整する場合は、strokeDasharrayに文字列を設定します。
編集可能な例
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" />
GitHubでこのページを編集する