KARAKURIDESIGN SYSTEM

LineChart

トレンドや推移を直感的に表現する折れ線グラフコンポーネントです。 linear・monotone・step・naturalの4種類の曲線スタイルと、シリーズごとのホバーハイライトをサポートします。

4
Types
5
Colors
4
Curve
Recharts
Base

Playground

Preview
Multiple
Type
Series
Style
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <LineChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <ChartXAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <ChartLine dataKey="desktop" stroke="var(--color-desktop)" />
    <ChartLine dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</Chart>

JSX Composition

Chart.* は当ライブラリから、その他は Recharts からインポートしてください。

Grid<CartesianGrid />
Y-Axis<ChartYAxis />
Legend<ChartLegend /> (複数シリーズ時)
Labels<LabelList /> (単一シリーズ時)

Patterns

LineChartの主要な表示パターンです。用途に応じて使い分けてください。

Default

単一シリーズの基本的な折れ線グラフ

Multiple Lines

複数シリーズを重ねて比較

Step Line

階段状の折れ線グラフ (type="step")

Dashed Line

実線と破線の組み合わせ (variant="dashed")

Tooltip Styles

ChartTooltipContentのindicatorpropで、ツールチップのインジケーター形状を変更できます。

Dot (default)

デフォルトのドットインジケーター

January
Desktop186
Mobile80
indicator="dot"

Line

垂直線のインジケーター

January
Desktop186
Mobile80
indicator="line"

Dashed

破線のインジケーター

January
Desktop186
Mobile80
indicator="dashed"

API

Component Structure

Chart— Recharts
.LineProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

チャートの設定オブジェクト (ラベル・カラー定義)

children—
ReactElement

Rechartsチャートコンポーネント

idundefined
string

チャートのユニークID (CSS変数スコーピング用)

hoverFadefalse
boolean

ホバーしたシリーズをフルカラーで表示し、それ以外をフェードアウトするハイライト効果を有効にする

ChartLine

type"monotone"
"linear" | "monotone" | "step" | "natural"

カーブの補間タイプ。monotoneは滑らかな曲線、linearは直線、stepは階段状、naturalは自然なスプライン

variant"solid"
"solid" | "dashed"

ラインのスタイル。"dashed" は破線で表示

dottrue
boolean

データポイントのドット表示

activeDottrue
boolean

ホバー時のアクティブドット表示

ChartTooltipContent

indicator"dot"
"dot" | "line" | "dashed"

インジケーターの形状

hideLabelfalse
boolean

ラベルを非表示にする

hideIndicatorfalse
boolean

インジケーターを非表示にする

colorundefined
string

インジケーターの色を直接指定。未指定時はペイロードの色を使用

labelClassNameundefined
string

ラベル要素に追加するCSSクラス

nameKeyundefined
string

データキーの名前マッピング

labelKeyundefined
string

ラベルキーのマッピング

labelFormatterundefined
(value, payload) => ReactNode

ラベルのカスタムフォーマッター

formatterundefined
(value, name, item, index, payload) => ReactNode

値のカスタムフォーマッター

ChartLegendContent

hideIconfalse
boolean

アイコンを非表示にする

nameKeyundefined
string

データキーの名前マッピング

verticalAlign"bottom"
"top" | "middle" | "bottom"

垂直位置 (Recharts Legendから自動注入)

align"center"
"left" | "center" | "right"

水平位置 (Recharts Legendから自動注入)

layout"horizontal"
"horizontal" | "vertical"

レイアウト方向 (Recharts Legendから自動注入)

ChartXAxis / ChartYAxis

tick{ style: { fontSize, fill } }
object

軸ラベルのスタイル。デフォルトでデザイントークン (--font-size-2xs, --color-text-subtle) を適用。カスタムオブジェクトで上書き可能

width (YAxis)"auto"
number | "auto"

Y軸の幅。"auto"でデータに応じて自動調整。数値で固定幅を指定可能

...props—
XAxisProps | YAxisProps

Recharts XAxis / YAxis の全プロパティをそのまま使用可能