Skip to content
fandhe-frontend
GitHub

Area Chart

fandhe-frontend-pre-styled-uiarea_chart mod が提供するスタイル済み Area Chart 部品です。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

系列ごとに折れ線 + 塗りつぶし面を重ねて描く自己完結チャートです。積み上げ・曲線補間は別イシュー(#847 以降)のスコープです。

Features

  • 系列ごとに折れ線 + domain 下端へ閉じた塗りつぶし面を重ねて描く自己完結チャート
  • 積み上げ・曲線補間は charts 共通 API 側の別イシュー

Anatomy

root
  plot
    series-area
    series-line

API Reference

Arguments

NameTypeDefaultDescription
data&ChartData(必須)描画する系列データ。
aria_label&str(必須)svg 要素の aria-label(データ可視化のため必須引数)。
sizeSizeMdroot の CSS 表示高さを切替える寸法 variant。
width / heightf64300.0 / 150.0viewBox の座標系寸法。

CSS Variables

VariableDefault
--fandhe-area-chart-heightauto

Examples

単一系列の面グラフ

3 カテゴリ 1 系列の面グラフを描画します。