feat(charts): percentage stacked bar chart mode

app/src/plugins/bar/component.tsx

@@ -33,6 +33,7 @@ function BarPluginComponent({
     <BarChart
       data={(data as BarChartDataPoint[]) ?? []}
       orientation={settings.orientation}
+      stackMode={settings.stackMode}
       stacked={settings.stacked}
       showValues={settings.showValues}
       showLegend={settings.showLegend}

app/src/plugins/bar/settings.ts

@@ -6,6 +6,8 @@ import { z } from "zod";
 export const barSettingsSchema = z
   .object({
     orientation: z.enum(["vertical", "horizontal"]).default("vertical"),
+    stackMode: z.enum(["none", "stacked", "percent"]).default("none"),
+    /** @deprecated Use stackMode instead. Kept for backward compatibility. */
     stacked: z.boolean().default(false),
     showValues: z.boolean().default(false),
     showLegend: z.boolean().default(true),

component/src/charts/__tests__/bar-chart.test.tsx

@@ -143,7 +143,14 @@ describe("BarChart", () => {
   });
 
   it("swaps axis label targets for horizontal orientation", () => {
-    render(<BarChart data={sampleData} orientation="horizontal" xAxisLabel="Revenue" yAxisLabel="Product" />);
+    render(
+      <BarChart
+        data={sampleData}
+        orientation="horizontal"
+        xAxisLabel="Revenue"
+        yAxisLabel="Product"
+      />,
+    );
     const optionsCall = mockSetOption.mock.calls[0][0];
     // xAxisLabel goes to the value axis (xAxis in horizontal), yAxisLabel to category (yAxis)
     expect(optionsCall.xAxis.name).toBe("Revenue");
@@ -153,7 +160,9 @@ describe("BarChart", () => {
   // --- Reference lines (markLine) ---
 
   it("attaches markLine to the first series when referenceLines is provided", () => {
-    const refs = JSON.stringify([{ value: 150, label: "Target", color: "#ff0000" }]);
+    const refs = JSON.stringify([
+      { value: 150, label: "Target", color: "#ff0000" },
+    ]);
     render(<BarChart data={sampleData} referenceLines={refs} />);
     const optionsCall = mockSetOption.mock.calls[0][0];
     expect(optionsCall.series[0].markLine).toBeDefined();
@@ -175,4 +184,60 @@ describe("BarChart", () => {
     expect(optionsCall.dataZoom).toBeDefined();
     expect(optionsCall.dataZoom.length).toBeGreaterThan(0);
   });
+
+  // --- Percentage stacked ---
+
+  it("normalizes values to percentages when stackMode is percent", () => {
+    render(<BarChart data={stackedData} stackMode="percent" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    // Q1: sales=100, returns=20 → total=120 → sales=83.33%, returns=16.67%
+    const salesSeries = optionsCall.series[0];
+    const returnsSeries = optionsCall.series[1];
+    expect(salesSeries.data[0]).toBeCloseTo(83.33, 1);
+    expect(returnsSeries.data[0]).toBeCloseTo(16.67, 1);
+  });
+
+  it("sets y-axis max to 100 and formats as percent in percent mode", () => {
+    render(<BarChart data={stackedData} stackMode="percent" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    const valueAxis = optionsCall.yAxis;
+    expect(valueAxis.max).toBe(100);
+  });
+
+  it("stacks series in percent mode", () => {
+    render(<BarChart data={stackedData} stackMode="percent" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    expect(optionsCall.series[0].stack).toBe("total");
+    expect(optionsCall.series[1].stack).toBe("total");
+  });
+
+  it("stacks series in stacked mode (backward compat)", () => {
+    render(<BarChart data={stackedData} stackMode="stacked" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    expect(optionsCall.series[0].stack).toBe("total");
+  });
+
+  it("does not stack in none mode", () => {
+    render(<BarChart data={stackedData} stackMode="none" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    expect(optionsCall.series[0].stack).toBeUndefined();
+  });
+
+  it("backward compat: stacked boolean still works", () => {
+    render(<BarChart data={stackedData} stacked />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    expect(optionsCall.series[0].stack).toBe("total");
+  });
+
+  it("handles zero total gracefully in percent mode", () => {
+    const zeroData = [
+      { label: "A", x: 0, y: 0 },
+      { label: "B", x: 10, y: 20 },
+    ];
+    render(<BarChart data={zeroData} stackMode="percent" />);
+    const optionsCall = mockSetOption.mock.calls[0][0];
+    // Zero total row: all values should be 0 (not NaN)
+    expect(optionsCall.series[0].data[0]).toBe(0);
+    expect(optionsCall.series[1].data[0]).toBe(0);
+  });
 });

component/src/charts/bar-chart.tsx

@@ -17,12 +17,16 @@
 import { parseColorThresholds } from "./color-threshold";
 import type { StylingRule } from "./styling-rule";
 
+export type BarStackMode = "none" | "stacked" | "percent";
+
 export interface BarChartProps extends Omit<BaseChartProps, "options"> {
   /** Array of data points. Each object has a `label` key and one or more numeric series keys. */
   data: BarChartDataPoint[];
   /** Bar orientation */
   orientation?: "vertical" | "horizontal";
-  /** Stack bars when multiple series */
+  /** Stack mode: none (grouped), stacked (absolute), percent (100% stacked) */
+  stackMode?: BarStackMode;
+  /** @deprecated Use stackMode instead. Stack bars when multiple series */
   stacked?: boolean;
   /** Show values on bars */
   showValues?: boolean;
@@ -62,7 +66,8 @@
 function BarChart({
   data,
   orientation = "vertical",
+  stackMode: stackModeProp,
   stacked = false,
   showValues = false,
   showLegend,
   barWidth = 0,
@@ -80,10 +85,26 @@
   const { width, height, containerRef } = useContainerSize();
   const { compact, hideLegend } = getCompactState(width, height);
 
+  // Resolve stack mode: prefer explicit stackMode, fall back to legacy boolean
+  const stackMode: BarStackMode =
+    stackModeProp ?? (stacked ? "stacked" : "none");
+  const isPercent = stackMode === "percent";
+  const isStacked = stackMode === "stacked" || isPercent;
+
   const options = useMemo((): EChartsOption => {
     if (!data.length) return buildEmptyDataOption();
 
     const seriesKeys = Object.keys(data[0]).filter((k) => k !== "label");
+
+    // Pre-compute row totals for percentage normalization
+    const rowTotals = isPercent
+      ? data.map((d) =>
+          seriesKeys.reduce((sum, key) => {
+            const v = Number(d[key]);
+            return sum + (Number.isFinite(v) ? Math.abs(v) : 0);
+          }, 0),
+        )
+      : [];
     const effectiveShowLegend = resolveShowLegend(
       showLegend,
       seriesKeys.length,
@@ -116,18 +137,56 @@
     };
     const valueAxis = {
       type: "value" as const,
-      axisLabel: { show: !compact },
+      axisLabel: {
+        show: !compact,
+        ...(isPercent ? { formatter: "{value}%" } : {}),
+      },
       splitLine: { show: showGridLines },
       name: compact ? undefined : isHorizontal ? xAxisLabel : yAxisLabel,
       nameLocation: "middle" as const,
       nameGap: 50,
+      ...(isPercent ? { max: 100 } : {}),
     };
 
+    // In percent mode, build a tooltip showing "pct% (absolute)"
+    const percentTooltipFormatter = isPercent
+      ? (params: unknown) => {
+          const items = Array.isArray(params)
+            ? (params as {
+                seriesName?: string;
+                name?: string;
+                value?: number;
+                marker?: string;
+                dataIndex?: number;
+              }[])
+            : [
+                params as {
+                  seriesName?: string;
+                  name?: string;
+                  value?: number;
+                  marker?: string;
+                  dataIndex?: number;
+                },
+              ];
+          const header = items[0]?.name ?? "";
+          const lines = items.map((p) => {
+            const pct =
+              typeof p.value === "number" ? p.value.toFixed(1) : p.value;
+            const rowIdx = p.dataIndex ?? 0;
+            const seriesKey =
+              seriesKeys.find((k) => k === p.seriesName) ?? seriesKeys[0];
+            const absValue = seriesKey ? data[rowIdx]?.[seriesKey] : "";
+            return `${p.marker ?? ""} ${p.seriesName}: ${pct}% (${absValue})`;
+          });
+          return `<strong>${header}</strong><br/>${lines.join("<br/>")}`;
+        }
+      : undefined;
+
     return {
       tooltip: {
         trigger: "axis" as const,
         axisPointer: { type: "shadow" as const },
-        formatter: buildTooltipFormatter(),
+        formatter: percentTooltipFormatter ?? buildTooltipFormatter(),
       },
       legend: effectiveShowLegend ? { bottom: 0 } : undefined,
       grid: buildCompactGrid(compact, effectiveShowLegend),
@@ -136,10 +195,21 @@
       series: seriesKeys.map((key, idx) => ({
         name: key,
         type: "bar" as const,
-        data: data.map((d) => {
+        data: data.map((d, rowIdx) => {
           const rawValue = d[key];
           const numericValue =
             typeof rawValue === "number" ? rawValue : Number(rawValue);
+
+          // In percent mode, normalize to percentage of row total
+          let displayValue = rawValue as number | string;
+          if (isPercent) {
+            const total = rowTotals[rowIdx];
+            displayValue =
+              total > 0 && Number.isFinite(numericValue)
+                ? Math.round((numericValue / total) * 10000) / 100
+                : 0;
+          }
+
           const color = Number.isFinite(numericValue)
             ? resolveItemColor(
                 numericValue,
@@ -148,9 +218,11 @@
                 thresholds,
               )
             : undefined;
-          return color ? { value: rawValue, itemStyle: { color } } : rawValue;
+          return color
+            ? { value: displayValue, itemStyle: { color } }
+            : displayValue;
         }),
-        stack: stacked ? "total" : undefined,
+        stack: isStacked ? "total" : undefined,
         barWidth: effectiveBarWidth,
         barGap,
         label: effectiveShowValues
@@ -167,7 +239,8 @@
   }, [
     data,
     orientation,
-    stacked,
+    isStacked,
+    isPercent,
     showValues,
     showLegend,
     barWidth,

component/src/charts/index.ts

@@ -31,7 +31,7 @@ export {
 export { LineChart } from "./line-chart";
 export type { LineChartProps } from "./line-chart";
 export { BarChart } from "./bar-chart";
-export type { BarChartProps } from "./bar-chart";
+export type { BarChartProps, BarStackMode } from "./bar-chart";
 export { PieChart } from "./pie-chart";
 export type { PieChartProps } from "./pie-chart";
 export { SingleValueChart } from "./single-value-chart";

component/src/components/composed/__tests__/chart-options-panel.test.tsx

@@ -26,7 +26,7 @@ describe("ChartOptionsPanel", () => {
     );
     expandAllCategories();
     expect(screen.getByText("Orientation")).toBeInTheDocument();
-    expect(screen.getByText("Stacked")).toBeInTheDocument();
+    expect(screen.getByText("Stack Mode")).toBeInTheDocument();
     expect(screen.getByText("Show Values")).toBeInTheDocument();
     expect(screen.getByText("Show Legend")).toBeInTheDocument();
     expect(screen.getByText("Bar Width (px, 0=auto)")).toBeInTheDocument();
@@ -49,14 +49,15 @@ describe("ChartOptionsPanel", () => {
     render(
       <ChartOptionsPanel
         chartType="bar"
-        settings={{ stacked: false }}
+        settings={{ showValues: false }}
         onSettingsChange={onChange}
       />,
     );
-    const switchEl = screen.getByRole("switch", { name: "Stacked" });
+    expandAllCategories();
+    const switchEl = screen.getByRole("switch", { name: "Show Values" });
     fireEvent.click(switchEl);
     expect(onChange).toHaveBeenCalledWith(
-      expect.objectContaining({ stacked: true }),
+      expect.objectContaining({ showValues: true }),
     );
   });
 

component/src/components/composed/__tests__/chart-options-schema.test.ts

@@ -9,7 +9,7 @@ describe("getChartOptions", () => {
     const options = getChartOptions("bar");
     const keys = options.map((o) => o.key);
     expect(keys).toContain("orientation");
-    expect(keys).toContain("stacked");
+    expect(keys).toContain("stackMode");
     expect(keys).toContain("showValues");
     expect(keys).toContain("showLegend");
   });
@@ -160,7 +160,7 @@ describe("getDefaultChartSettings", () => {
   it("returns correct defaults for bar chart", () => {
     const d = getDefaultChartSettings("bar");
     expect(d.orientation).toBe("vertical");
-    expect(d.stacked).toBe(false);
+    expect(d.stackMode).toBe("none");
     expect(d.showValues).toBe(false);
     expect(d.showLegend).toBe(true);
   });

component/src/components/composed/chart-options/bar.ts

@@ -22,13 +22,18 @@ export const barOptions: ChartOptionDef[] = [
     ],
   },
   {
-    key: "stacked",
-    label: "Stacked",
-    type: "boolean",
-    default: false,
+    key: "stackMode",
+    label: "Stack Mode",
+    type: "select",
+    default: "none",
     category: "Layout",
     description:
-      "Stack series on top of each other instead of placing them side by side.",
+      "How to arrange multiple series: side by side, stacked, or 100% stacked (percentage).",
+    options: [
+      { label: "Normal (grouped)", value: "none" },
+      { label: "Stacked", value: "stacked" },
+      { label: "100% Stacked", value: "percent" },
+    ],
   },
   {
     key: "barWidth",