ApexCharts 全種別グラフィック集
apexcharts.com のチャート種別一覧を参考に、各グラフィックを個別セクションで実装したサンプル集です。左メニューからジャンプできます。
Line
複数系列の推移を折れ線で比較。
Area
グラデーション塗りで推移の量感を表現。
Column
カテゴリ間の値を縦棒で比較。
Bar
ランキングなど横並び比較に適した横棒。
Mixed / Combo
棒(収益)と線(成長率)を1つのチャートで重ねて表示。
Candlestick
四本値(OHLC)を1本のローソクで表現。
BoxPlot
最小・四分位・中央値・最大値の分布を表現。
Timeline
タスクごとの開始〜終了期間をガントのように表示。
Range Area
最小〜最大の範囲を帯で表現(信頼区間などに)。
Stockコア機能で代替
ローソク足＋出来高の組み合わせ。本格的な移動平均線・RSI等のインジケーターが必要な場合は別パッケージ ApexStock (要 apexstock CDN)を使用します。
Bubble
x・y・バブルサイズ(z)の3変数を1チャートで表現。
Scatter
2変数間の相関・散らばりを点で表現。
Heatmap
2軸の交差点を色の濃淡で表現。
Treemap
面積の大きさで構成比・シェアを表現。
Pie
全体に対する各カテゴリの割合を円で表現。
Donut
中心に合計値を表示できる、円グラフの派生形。
Radar
複数軸の評価を多角形で比較。
Polar Area
角度と半径の両方で値を表現する円グラフ。
RadialBar
複数の値を同心円状のリングで比較。
Gauge
単一指標の達成度を半円メーターで表現。
Funnel
段階を経るごとの絞り込み・離脱を表現。
Slope
施策前後など、2時点間の変化を線の傾きで表現。
Sparklines
軸や装飾を省いた極小チャートで、KPIカードに埋め込む。
Ganttコア機能で代替
タスクのスケジュールと進捗を横棒で表現。専用ライブラリApexGantt(apexgantt CDN)はブラウザ直読み込み時の互換性が不安定だったため、CSS/JSによる自前実装に切り替えています。
Sankeyコア機能で代替
流量・遷移をノードとリンクの太さで表現。専用ライブラリApexSankeyも同様の理由でSVGの自前実装に切り替えています。
Treeコア機能で代替
組織図・階層構造をツリーで表現。CSSのみによる定番の組織図パターンで実装しています。
Data Gridコア機能で代替
列見出しクリックでソート可能なテーブル。大量データの仮想スクロールや行内編集が必要な場合は専用の ApexGrid (apex-grid) を使用します。
FlowchartReactFlow
ドラッグ可能なノードでプロセスの分岐を表現。マウスでノードを動かせる。
Dependency GraphReactFlow
タスク間の依存関係を有向グラフで表現。
Cohort Retention Heatmap
コホート開始週×経過週で継続率を可視化。濃い青ほど継続率が高いことを示す。
Cohort Statistics
コホート全体のサマリーKPIをカードで一覧表示。
Retention Curve
週次の継続率推移を、全体平均と個別コホートで比較。
Top Issues
問い合わせ内容の内訳をランキング形式のバーリストで表示。
Completion Funnel
Completed → Test Results → Impact の3ステップで案件の絞り込みを表現。
Impact Overview
施策実施前後の主要指標を比較するテーブル。
| Total cases 施策前 → 施策後(想定) |
11,327 | 11,327 |
| Net cost savings 施策前 → 施策後(想定) |
No impact | $178,940 |
| Net FTE impact 施策前 → 施策後(想定) |
No impact | -10.6 |
Cost / FTE Impact Breakdown
コスト削減効果とFTEインパクトを、1年後・5年後・10年後で内訳表示。
Progress Circle + Metric
円形の進捗インジケーターに、数値と説明文を横並びで添えるパターン。
$340/$450
Spend management control