LineChart
LineChartは、複数のデータを比較するためのラインチャートを描画するコンポーネントです。
インポート
pnpm add @yamada-ui/charts
@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { LineChart } from "@yamada-ui/charts"
使い方
LineChartは、内部的にRechartsを使用しています。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 <LineChart data={data} series={series} dataKey="name" />
サイズを変更する
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" size="sm" /> <LineChart data={data} series={series} dataKey="name" size="md" /> <LineChart data={data} series={series} dataKey="name" size="lg" /> <LineChart data={data} series={series} dataKey="name" size="full" /> </VStack> )
曲線を変更する
曲線を変更する場合は、curveTypeに"monotone"や"bump"などを設定します。デフォルトは、"monotone"です。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" curveType="monotone" /> <LineChart data={data} series={series} dataKey="name" curveType="bump" /> <LineChart data={data} series={series} dataKey="name" curveType="linear" /> <LineChart data={data} series={series} dataKey="name" curveType="natural" /> <LineChart data={data} series={series} dataKey="name" curveType="step" /> <LineChart data={data} series={series} dataKey="name" curveType="stepBefore" /> <LineChart data={data} series={series} dataKey="name" curveType="stepAfter" /> </VStack> )
方向を変更する
方向を変更する場合は、layoutTypeに"horizontal"または"vertical"を設定します。デフォルトは、"horizontal"です。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 ( <LineChart data={data} series={series} dataKey="name" layoutType="vertical" /> )
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" withLegend /> <LineChart 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 ( <LineChart data={data} series={series} dataKey="name" xAxisLabel="ポケモン" yAxisLabel="ステータス" /> )
基準線を表示する
基準線を表示する場合は、referenceLinePropsにpropsを設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 ( <LineChart data={data} series={series} dataKey="name" referenceLineProps={[{ y: 30, label: "Avg.", color: "red.500" }]} /> )
点を非表示にする
点を非表示にする場合は、withDotsまたはwithActiveDotsをfalseに設定します。デフォルトは、trueです。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 ( <LineChart data={data} series={series} dataKey="name" withDots={false} withActiveDots={false} /> )
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 ( <LineChart data={data} series={series} dataKey="name" withTooltip={false} /> )
軸を非表示にする
軸を非表示にする場合は、withYAxisまたはwithXAxisをfalseに設定します。デフォルトは、trueです。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" withYAxis={false} /> <LineChart data={data} series={series} dataKey="name" withXAxis={false} /> </VStack> )
グリッドのレイアウトを変更する
グリッドのレイアウトを変更する場合は、gridAxisに"x", "y", "xy"または"none"を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" gridAxis="x" /> <LineChart data={data} series={series} dataKey="name" gridAxis="y" /> <LineChart data={data} series={series} dataKey="name" gridAxis="xy" /> <LineChart data={data} series={series} dataKey="name" gridAxis="none" /> </VStack> )
しるしをつける
しるしをつける場合は、tickLineに"x", "y", "xy"または"none"を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" tickLine="x" /> <LineChart data={data} series={series} dataKey="name" tickLine="y" /> <LineChart data={data} series={series} dataKey="name" tickLine="xy" /> <LineChart data={data} series={series} dataKey="name" tickLine="none" /> </VStack> )
同期させる
グラフの動作を同期させる場合は、互いのグラフのsyncIdに共通の文字列を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" syncId="syncId" /> <LineChart data={data} series={series} dataKey="name" syncId="syncId" /> </VStack> )
単位をつける
単位をつける場合は、unitに文字列を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 <LineChart data={data} series={series} dataKey="name" unit="P" />
フォーマットする
ツールチップのラベルをフォーマットする場合はlabelFormatterを、値をフォーマットする場合は、valueFormatterを使います。
軸のラベルをフォーマットする場合は、xAxisTickFormatterまたはyAxisTickFormatterを使います。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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> <LineChart data={data} series={series} dataKey="name" labelFormatter={(value) => `ポケモン: ${value}`} valueFormatter={(value) => `${value}P`} /> <LineChart data={data} series={series} dataKey="name" xAxisTickFormatter={(value) => `ポケモン: ${value}`} yAxisTickFormatter={(value) => `${value}P`} /> </VStack> )
透明度を調整する
透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = 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 ( <LineChart data={data} series={series} dataKey="name" fillOpacity={[0.8, 0.7]} /> )
破線を調整する
破線を調整する場合は、strokeDasharrayに文字列を設定します。
編集可能な例
const data = useMemo( () => [ { name: "ヤドン", HP: 90, こうげき: 65, ぼうぎょ: 65, とくこう: 40, とくぼう: 40, すばやさ: 15, }, { name: "コダック", HP: 50, こうげき: 52, ぼうぎょ: 48, とくこう: 65, とくぼう: 50, すばやさ: 55, }, { name: "カビゴン", HP: 160, こうげき: 110, ぼうぎょ: 65, とくこう: 65, とくぼう: 110, すばやさ: 30, }, ], [], ) const series: LineProps[] = useMemo( () => [ { dataKey: "HP", color: "green.500", strokeDasharray: "15 15" }, { dataKey: "こうげき", color: "red.500", strokeDasharray: "15 15" }, { dataKey: "ぼうぎょ", color: "blue.500", strokeDasharray: "15 15" }, { dataKey: "とくこう", color: "purple.500", strokeDasharray: "15 15" }, { dataKey: "とくぼう", color: "orange.500", strokeDasharray: "15 15" }, { dataKey: "すばやさ", color: "cyan.500", strokeDasharray: "15 15" }, ], [], ) return <LineChart data={data} series={series} dataKey="name" />
GitHubでこのページを編集する