7onicDESIGN SYSTEM

AreaChart

面積で量の変化を直感的に表現するエリアチャートコンポーネントです。時系列データの推移や積み上げ比率の表示に適しており、solidとgradientの2スタイルで視覚的な印象を調整できます。

4
Types
5
Colors
3
Indicator
Recharts
Base

Playground

Preview
Multiple
Type
Series
Style
Options
<Chart config={chartConfig} className="min-h-[200px]">
  <AreaChart 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.Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" />
    <Chart.Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" />
  </AreaChart>
</Chart>

JSX Composition

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

Grid<CartesianGrid />
Y-Axis<Chart.YAxis />
Legend<Chart.Legend />
Labels<LabelList />

Patterns

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

Default

単一シリーズの基本的なエリアチャート

Multiple Areas

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

Stacked

複数シリーズを積み上げて合計を視覚化

Gradient

グラデーション塗りで深みのある表現

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
.AreaProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

Props

Chart

config—
ChartConfig

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

children—
ReactElement

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

idundefined
string

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

hoverFadefalse
boolean

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

Chart.Area

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

曲線の補間方式

variant"solid"
"solid" | "gradient"

塗りのスタイル。"gradient" はSVG linearGradientを自動生成

dottrue
boolean

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

activeDottrue
boolean

ホバー時に強調ドットを表示

fillOpacity0.4
number

領域の不透明度 (0–1)。gradient variantでは無視される

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
March
Desktop237
9
Desktop
Mobile
1
Root
Chartラッパー
2
Chart Area
プロットエリア
3
X-Axis
水平軸
4
Y-Axis
垂直軸
5
Area Fill
塗りつぶし領域
6
Area Line
エリア上端ライン
7
Tooltip
ホバー情報
8
Grid
グリッド線
9
Legend
シリーズ凡例

Best Practices

✓

推奨

  • ✓ChartConfigでラベルとカラーを一元管理する
  • ✓accessibilityLayerを必ず有効にする
  • ✓積み上げエリアではstackIdを統一する
  • ✓gradientで視覚的な深みを加える
✕

避けるべき

  • ✗ハードコードされたカラー値を直接使用しない
  • ✗コンテナサイズなしでチャートを配置しない
  • ✗5シリーズ以上を1つのチャートに詰め込まない
  • ✗stackedで不透明度を高くしすぎて重なりが見えなくならないようにする

Accessibility

キーボード操作

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

ARIA / WCAG

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