7onicDESIGN 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} />
    <Chart.XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <Chart.Tooltip content={<Chart.TooltipContent />} />
    <Chart.Legend content={<Chart.LegendContent />} />
    <Chart.Line dataKey="desktop" stroke="var(--color-desktop)" />
    <Chart.Line dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</Chart>

JSX Composition

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

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

Patterns

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

Default

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

Multiple Lines

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

Step Line

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

Dashed Line

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

Tooltip Styles

Chart.TooltipContentの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

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

Chart.Line

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

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

variant"solid"
"solid" | "dashed"

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

dottrue
boolean

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

activeDottrue
boolean

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

Chart.TooltipContent

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

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

Chart.LegendContent

hideIconfalse
boolean

アイコンを非表示にする

nameKeyundefined
string

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

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

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

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

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

layout"horizontal"
"horizontal" | "vertical"

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

Chart.XAxis / Chart.YAxis

tick{ style: { fontSize, fill } }
object

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

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

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

...props—
XAxisProps | YAxisProps

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

Anatomy

1
2
4
3002001000
8
5
6
3
JanFebMarAprMay
7
February
Desktop305
9
Desktop
Mobile
1
Root
Chartラッパー
2
Chart Area
プロットエリア
3
X-Axis
水平軸
4
Y-Axis
垂直軸
5
Line
データライン
6
Dot
データポイント
7
Tooltip
ホバー情報
8
Grid
グリッド線
9
Legend
シリーズ凡例

Best Practices

✓

推奨

  • ✓時系列データやトレンド表示に使用する
  • ✓accessibilityLayerを必ず有効にする
  • ✓予測値にはvariant="dashed"を使用する
  • ✓デザイントークンのカラーを使用する
✕

避けるべき

  • ✗カテゴリ比較には使用しない (BarChartを推奨)
  • ✗5シリーズ以上を1つのチャートに詰め込まない
  • ✗離散データにmonotone補間を使用しない (stepを推奨)
  • ✗グリッドなしでデータの比較を強制しない

Accessibility

キーボード操作

Tabチャートエリアにフォーカス
Arrow Keysデータポイント間の移動

ARIA / WCAG

  • accessibilityLayer キーボード+SR対応
  • Tooltipでデータ値をテキストで提供
  • Legendでシリーズを識別可能
  • カラートークンでダークモード自動対応