積み上げ棒チャートStackedBarChartExperimental

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" },
        ],
    },
];

export function AcquisitionMixVariants() {
    return (
        <div className="grid gap-6">
            <StackedBarChart data={data} />
            <StackedBarChart data={data} showLegend showValues totalLabel="合計" />
            <StackedBarChart
              data={data}
              variant="horizontal"
              normalize
              showLegend
              totalLabel="合計"
            />
        </div>
    );
}