積み上げ棒チャートStackedBarChartExperimental

グループごとの内訳を比較する縦・横の積み上げ棒チャートです。

プレビュー

データ

比率

状態とバリエーション

縦棒

標準の縦積み上げ棒です。

1月2月3月

5本表示

5つのグループで、棒の太さと間隔を確認します。

84959211397
1月2月3月4月5月

凡例と値

合計値とセグメント凡例を表示します。

849592
1月2月3月
自然流入128
紹介83
広告60

横棒

行ごとに比較しやすい横向きバリエーションです。

1月
84
2月
95
3月
92

閾値（上限超え）

threshold は各グループの合計に上限ラインを引き、超過グループをリング＋destructive の合計値で示します。segment の色は一切変えません（それぞれ意味を持つため）。スライダーで上限を動かせます。normalize 指定時は無視されます。

6510078110
A班B班C班D班
通常203
残業150

正規化

各グループを 100% にそろえて構成比を比較します。

1月
2月
3月
自然流入128
紹介83
広告60

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
dataStackedBarChartGroup[]-積み上げ棒として表示するグループとセグメント値です。
variant"vertical" | "horizontal""vertical"縦・横の向きを切り替える SSOT 登録済みバリエーションです。
normalizebooleanfalse各グループを 100% に正規化して比率比較します。
thresholdnumber-各グループの「合計」に対する上限ライン。基準線を引き、超過グループをリング＋thresholdTone の合計値で示します。segment の色は一切変えません。normalize 指定時は無視（各グループが 100% になり絶対値の位置が無いため）。(#285)
thresholdLabelReactNode"Limit"閾値ラインのアクセシブル名。超過の読み上げにも使われます。
thresholdToneChartTone"destructive"上限ラインと超過マーキングのトーンです。
formatValue(value: number) => ReactNode-各値を整形します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。
valueFormat"number" | "compact" | "integer" | Intl.NumberFormatOptions-シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338)

使い方

import { StackedBarChart } from "@gunjo/ui";

const data = [
    {
        label: "1月",
        segments: [
            { label: "自然流入", value: 42, color: "primary" },
            { label: "紹介", value: 24, color: "success" },
            { label: "広告", value: 18, color: "warning" },
        ],
    },
    {
        label: "2月",
        segments: [
            { label: "自然流入", value: 48, color: "primary" },
            { label: "紹介", value: 31, color: "success" },
            { label: "広告", value: 16, color: "warning" },
        ],
    },
    {
        label: "3月",
        segments: [
            { label: "自然流入", value: 38, color: "primary" },
            { label: "紹介", value: 28, color: "success" },
            { label: "広告", value: 26, color: "warning" },
        ],
    },
];

<StackedBarChart data={data} />
<StackedBarChart data={data} showLegend showValues totalLabel="合計" />
<StackedBarChart data={data} variant="horizontal" normalize showLegend totalLabel="合計" />

使用コンポーネント

積み上げ棒チャートチャート凡例ツールチップ

関連コンポーネント

棒グラフ分布バー