pptx-kit-preview 0.3.1 → 0.3.2

package/dist/index.js

@@ -603,27 +603,23 @@ var patternDef = (pat) => {
       return `<path d="M0 0L${W} ${H}" stroke="${fg}" stroke-width="${width}"/>`;
     return `<path d="M${W} 0L0 ${H}" stroke="${fg}" stroke-width="${width}"/>`;
   };
-  const dots = (density) => {
-    const count = Math.max(1, Math.round(density * 4));
+  const BAYER4 = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];
+  const screen = (density) => {
+    const threshold = density * 16;
     const out = [];
-    const grid = count <= 1 ? [[4, 4]] : count === 2 ? [
-      [2, 2],
-      [6, 6]
-    ] : [
-      [2, 2],
-      [6, 2],
-      [2, 6],
-      [6, 6]
-    ];
-    for (const [x, y] of grid.slice(0, count)) {
-      out.push(`<circle cx="${x}" cy="${y}" r="0.7" fill="${fg}"/>`);
+    for (let i = 0; i < 16; i++) {
+      if (BAYER4[i] < threshold) {
+        const cx = i % 4 * 2;
+        const cy = Math.floor(i / 4) * 2;
+        out.push(`<rect x="${cx}" y="${cy}" width="2" height="2" fill="${fg}"/>`);
+      }
     }
     return out.join("");
   };
   const pctMatch = /^pct(\d+)$/.exec(preset);
   if (pctMatch) {
-    const pct = Math.min(100, Math.max(5, Number.parseInt(pctMatch[1], 10)));
-    body = dots(pct / 100);
+    const pct = Math.min(100, Math.max(0, Number.parseInt(pctMatch[1], 10)));
+    body = screen(pct / 100);
   } else if (preset === "horzBrick" || preset === "ltHorizontal" || preset === "narHorz") {
     body = stripe("h", 0.8);
   } else if (preset === "dkHorizontal") {
@@ -657,7 +653,7 @@ var patternDef = (pat) => {
   } else if (preset === "solidDmnd" || preset === "openDmnd") {
     body = `<path d="M4 1L7 4 4 7 1 4Z" fill="${preset === "solidDmnd" ? fg : "none"}" stroke="${fg}" stroke-width="0.6"/>`;
   } else {
-    body = dots(0.5);
+    body = screen(0.5);
   }
   const defs = `<defs><pattern id="${id}" patternUnits="userSpaceOnUse" width="${W}" height="${H}"><rect width="${W}" height="${H}" fill="${bg}"/>${body}</pattern></defs>`;
   return { defs, fillAttr: `url(#${id})` };
@@ -2516,6 +2512,9 @@ var DISPLAY_UNIT_LABEL = {
   billions: "Billions",
   trillions: "Trillions"
 };
+var DEFAULT_AXIS_COLOR = "#000000";
+var DEFAULT_GRID_COLOR = "#D9D9D9";
+var AXIS_TICK_LEN = 5;
 var axisTickAttrs = (style) => {
   const sz = style?.sizePt ?? 10;
   const fill = style?.color ?? "#6B7280";
@@ -2532,10 +2531,15 @@ var renderValueAxis = (f, axis) => {
   })() : niceTicks(axis.min, axis.max);
   const out = [];
   const range = axis.max - axis.min || 1;
-  const showGrid = axis.majorGridlines ?? true;
-  const gridStroke = axis.majorGridlineColor ?? "#E5E7EB";
+  const fmtTick = (t) => axis.percent ? `${Math.round(t * 100)}%` : formatAxisLabel(
+    axis.displayUnits ? t / DISPLAY_UNIT_DIVISOR[axis.displayUnits] : t,
+    axis.numberFormat
+  );
+  const showGrid = axis.majorGridlines ?? false;
+  const gridStroke = axis.majorGridlineColor ?? DEFAULT_GRID_COLOR;
+  const axisColor = axis.lineColor ?? DEFAULT_AXIS_COLOR;
   const tickMark = axis.majorTickMark ?? "out";
-  const tickLen = 3;
+  const tickLen = AXIS_TICK_LEN;
   for (const t of ticks) {
     if (axis.orientation === "vertical") {
       const yp = f.plotY + f.plotH - (t - axis.min) / range * f.plotH;
@@ -2548,19 +2552,14 @@ var renderValueAxis = (f, axis) => {
         const tx1 = tickMark === "in" ? f.plotX : f.plotX - tickLen;
         const tx2 = tickMark === "out" ? f.plotX : tickMark === "cross" ? f.plotX + tickLen : f.plotX + tickLen;
         out.push(
-          `<line x1="${px(tx1)}" y1="${px(yp)}" x2="${px(tx2)}" y2="${px(yp)}" stroke="#9CA3AF" stroke-width="0.5"/>`
+          `<line x1="${px(tx1)}" y1="${px(yp)}" x2="${px(tx2)}" y2="${px(yp)}" stroke="${axisColor}" stroke-width="1"/>`
         );
       }
       const labelX = f.plotX - 4;
       const rot = axis.labelRotationDeg ?? 0;
       const transform = rot ? ` transform="rotate(${rot} ${px(labelX)} ${px(yp)})"` : "";
       out.push(
-        `<text x="${px(labelX)}" y="${px(yp)}" text-anchor="end" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transform}>${escapeXml2(
-          formatAxisLabel(
-            axis.displayUnits ? t / DISPLAY_UNIT_DIVISOR[axis.displayUnits] : t,
-            axis.numberFormat
-          )
-        )}</text>`
+        `<text x="${px(labelX)}" y="${px(yp)}" text-anchor="end" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transform}>${escapeXml2(fmtTick(t))}</text>`
       );
     } else {
       const xp = f.plotX + (t - axis.min) / range * f.plotW;
@@ -2574,19 +2573,14 @@ var renderValueAxis = (f, axis) => {
         const ty1 = tickMark === "in" ? baseY : baseY + tickLen;
         const ty2 = tickMark === "out" ? baseY : tickMark === "cross" ? baseY - tickLen : baseY - tickLen;
         out.push(
-          `<line x1="${px(xp)}" y1="${px(ty1)}" x2="${px(xp)}" y2="${px(ty2)}" stroke="#9CA3AF" stroke-width="0.5"/>`
+          `<line x1="${px(xp)}" y1="${px(ty1)}" x2="${px(xp)}" y2="${px(ty2)}" stroke="${axisColor}" stroke-width="1"/>`
         );
       }
       const horizLabelY = f.plotY + f.plotH + 12;
       const rotH = axis.labelRotationDeg ?? 0;
       const transformH = rotH ? ` transform="rotate(${rotH} ${px(xp)} ${px(horizLabelY)})"` : "";
       out.push(
-        `<text x="${px(xp)}" y="${px(horizLabelY)}" text-anchor="middle" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transformH}>${escapeXml2(
-          formatAxisLabel(
-            axis.displayUnits ? t / DISPLAY_UNIT_DIVISOR[axis.displayUnits] : t,
-            axis.numberFormat
-          )
-        )}</text>`
+        `<text x="${px(xp)}" y="${px(horizLabelY)}" text-anchor="middle" dominant-baseline="middle" ${axisTickAttrs(axis.labelStyle)}${transformH}>${escapeXml2(fmtTick(t))}</text>`
       );
     }
   }
@@ -2604,16 +2598,16 @@ var renderValueAxis = (f, axis) => {
       );
     }
   }
-  if (axis.lineColor !== void 0) {
-    if (axis.orientation === "vertical") {
-      out.push(
-        `<line x1="${px(f.plotX)}" y1="${px(f.plotY)}" x2="${px(f.plotX)}" y2="${px(f.plotY + f.plotH)}" stroke="${axis.lineColor}" stroke-width="0.75"/>`
-      );
-    } else {
-      out.push(
-        `<line x1="${px(f.plotX)}" y1="${px(f.plotY + f.plotH)}" x2="${px(f.plotX + f.plotW)}" y2="${px(f.plotY + f.plotH)}" stroke="${axis.lineColor}" stroke-width="0.75"/>`
-      );
-    }
+  if (axis.orientation === "vertical") {
+    out.push(
+      `<line x1="${px(f.plotX)}" y1="${px(f.plotY)}" x2="${px(f.plotX)}" y2="${px(f.plotY + f.plotH)}" stroke="${axisColor}" stroke-width="1"/>`
+    );
+  } else {
+    const zeroY = f.plotY + f.plotH - (0 - axis.min) / range * f.plotH;
+    const spineY = axis.min <= 0 && axis.max >= 0 ? zeroY : f.plotY + f.plotH;
+    out.push(
+      `<line x1="${px(f.plotX)}" y1="${px(spineY)}" x2="${px(f.plotX + f.plotW)}" y2="${px(spineY)}" stroke="${axisColor}" stroke-width="1"/>`
+    );
   }
   return out.join("");
 };
@@ -2642,7 +2636,7 @@ var renderCategoryAxis = (f, orientation, cats, pointCount2, skip = 1, labelStyl
     const truncLen = labelRotationDeg && Math.abs(labelRotationDeg) >= 30 ? 28 : 14;
     for (let i = 0; i < pointCount2; i++) {
       if (skip > 1 && i % skip !== 0) continue;
-      const cy = f.plotY + (i + 0.5) * step;
+      const cy = f.plotY + (pointCount2 - 1 - i + 0.5) * step;
       const lx = f.plotX - 4;
       const truncated = labels[i] !== void 0 && labels[i].length > truncLen ? `${labels[i].slice(0, truncLen - 2)}\u2026` : labels[i] ?? "";
       const transform = labelRotationDeg && labelRotationDeg !== 0 ? ` transform="rotate(${labelRotationDeg} ${px(lx)} ${px(cy)})"` : "";
@@ -2651,27 +2645,63 @@ var renderCategoryAxis = (f, orientation, cats, pointCount2, skip = 1, labelStyl
       );
     }
   }
-  if (lineColor !== void 0) {
-    if (orientation === "horizontal") {
+  const axisColor = lineColor ?? DEFAULT_AXIS_COLOR;
+  if (orientation === "horizontal") {
+    const baseY = f.plotY + f.plotH;
+    out.push(
+      `<line x1="${px(f.plotX)}" y1="${px(baseY)}" x2="${px(f.plotX + f.plotW)}" y2="${px(baseY)}" stroke="${axisColor}" stroke-width="1"/>`
+    );
+    const stepB = pointCount2 > 0 ? f.plotW / pointCount2 : 0;
+    for (let i = 0; i <= pointCount2; i++) {
+      const bx = f.plotX + i * stepB;
       out.push(
-        `<line x1="${px(f.plotX)}" y1="${px(f.plotY + f.plotH)}" x2="${px(f.plotX + f.plotW)}" y2="${px(f.plotY + f.plotH)}" stroke="${lineColor}" stroke-width="0.75"/>`
+        `<line x1="${px(bx)}" y1="${px(baseY)}" x2="${px(bx)}" y2="${px(baseY + AXIS_TICK_LEN)}" stroke="${axisColor}" stroke-width="1"/>`
       );
-    } else {
+    }
+  } else {
+    out.push(
+      `<line x1="${px(f.plotX)}" y1="${px(f.plotY)}" x2="${px(f.plotX)}" y2="${px(f.plotY + f.plotH)}" stroke="${axisColor}" stroke-width="1"/>`
+    );
+    const stepB = pointCount2 > 0 ? f.plotH / pointCount2 : 0;
+    for (let i = 0; i <= pointCount2; i++) {
+      const by = f.plotY + i * stepB;
       out.push(
-        `<line x1="${px(f.plotX)}" y1="${px(f.plotY)}" x2="${px(f.plotX)}" y2="${px(f.plotY + f.plotH)}" stroke="${lineColor}" stroke-width="0.75"/>`
+        `<line x1="${px(f.plotX - AXIS_TICK_LEN)}" y1="${px(by)}" x2="${px(f.plotX)}" y2="${px(by)}" stroke="${axisColor}" stroke-width="1"/>`
       );
     }
   }
   return out.join("");
 };
 var seriesMinMax = (spec) => {
+  const isStacked = spec.grouping === "stacked" || spec.grouping === "percentStacked";
+  const isPercent = spec.grouping === "percentStacked";
   let min = Infinity;
   let max = -Infinity;
-  for (const s of spec.series) {
-    for (const v of s.values) {
-      if (v !== null && Number.isFinite(v)) {
-        if (v < min) min = v;
-        if (v > max) max = v;
+  if (isPercent) {
+    min = 0;
+    max = 1;
+  } else if (isStacked) {
+    const N = spec.series.reduce((n, s) => Math.max(n, s.values.length), 0);
+    for (let c = 0; c < N; c++) {
+      let pos = 0;
+      let neg = 0;
+      for (const s of spec.series) {
+        const v = s.values[c];
+        if (v !== null && v !== void 0 && Number.isFinite(v)) {
+          if (v >= 0) pos += v;
+          else neg += v;
+        }
+      }
+      if (pos > max) max = pos;
+      if (neg < min) min = neg;
+    }
+  } else {
+    for (const s of spec.series) {
+      for (const v of s.values) {
+        if (v !== null && Number.isFinite(v)) {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        }
       }
     }
   }
@@ -2679,6 +2709,9 @@ var seriesMinMax = (spec) => {
   if (!Number.isFinite(max)) max = 1;
   if (max === min) max = min + 1;
   if (min > 0) min = 0;
+  if (isPercent) {
+    return { min: 0, max: 1, step: 0.2 };
+  }
   const step = niceStep(max - min);
   max = (Math.floor(max / step) + 1) * step;
   if (spec.valueAxis?.min !== void 0) min = spec.valueAxis.min;
@@ -2704,9 +2737,9 @@ var renderChartLegend = (f, names, colors, position = "b", textStyle, markerSymb
   const swatch = (i, swatchX, swatchY) => {
     const color = colors[i % colors.length];
     const sym = markerSymbols?.[i];
-    if (sym && sym !== "none" && sym !== "auto") {
+    if (markerSymbols !== void 0 && sym !== "none") {
       const r = 4.5;
-      return seriesMarker(sym, swatchX + r, swatchY + r, r, color);
+      return seriesMarker(autoMarkerSymbol(sym, i), swatchX + r, swatchY + r, r, color);
     }
     return `<rect x="${px(swatchX)}" y="${px(swatchY)}" width="9" height="9" fill="${color}"/>`;
   };
@@ -2769,24 +2802,7 @@ var renderColumnChart = (f, spec, colors) => {
   const grouping = spec.grouping ?? "clustered";
   const isStacked = grouping === "stacked" || grouping === "percentStacked";
   const isPercent = grouping === "percentStacked";
-  let { min, max } = seriesMinMax(spec);
-  if (isStacked) {
-    let sumMin = Infinity;
-    let sumMax = -Infinity;
-    for (let c = 0; c < N; c++) {
-      let pos = 0;
-      let neg = 0;
-      for (const s of spec.series) {
-        const v = s.values[c] ?? 0;
-        if (v >= 0) pos += v;
-        else neg += v;
-      }
-      if (neg < sumMin) sumMin = neg;
-      if (pos > sumMax) sumMax = pos;
-    }
-    min = isPercent ? 0 : Math.min(0, sumMin);
-    max = isPercent ? 1 : Math.max(1, sumMax);
-  }
+  const { min, max } = seriesMinMax(spec);
   const range = max - min || 1;
   const groupW = f.plotW / N;
   const gapPctC = (spec.gapWidthPct ?? 150) / 100;
@@ -2819,7 +2835,7 @@ var renderColumnChart = (f, spec, colors) => {
         const y1 = f.plotY + f.plotH - (Math.min(stackedTop, stackedBase) - min) / range * f.plotH;
         const h = Math.abs(y1 - y0);
         out.push(
-          `<rect x="${px(x0)}" y="${px(y0)}" width="${px(barW)}" height="${px(h)}" fill="${colors[s % colors.length]}"/>`
+          `<rect x="${px(x0)}" y="${px(y0)}" width="${px(barW)}" height="${px(h)}" fill="${spec.series[s]?.color ?? colors[s % colors.length]}"/>`
         );
         if (showLabelFor(s) && Math.abs(v) > 0) {
           const labelY = (y0 + y1) / 2 + 3;
@@ -2993,6 +3009,17 @@ var smoothPath = (pts) => {
   }
   return parts.join(" ");
 };
+var AUTO_MARKER_SYMBOLS = [
+  "diamond",
+  "square",
+  "triangle",
+  "x",
+  "star",
+  "dot",
+  "plus",
+  "dash"
+];
+var autoMarkerSymbol = (symbol, seriesIdx) => symbol !== void 0 && symbol !== "auto" ? symbol : AUTO_MARKER_SYMBOLS[seriesIdx % AUTO_MARKER_SYMBOLS.length];
 var seriesMarker = (symbol, cx, cy, r, color) => {
   switch (symbol) {
     case "square":
@@ -3054,24 +3081,7 @@ var renderBarChart = (f, spec, colors) => {
   const grouping = spec.grouping ?? "clustered";
   const isStacked = grouping === "stacked" || grouping === "percentStacked";
   const isPercent = grouping === "percentStacked";
-  let { min, max } = seriesMinMax(spec);
-  if (isStacked) {
-    let sumMin = Infinity;
-    let sumMax = -Infinity;
-    for (let c = 0; c < N; c++) {
-      let pos = 0;
-      let neg = 0;
-      for (const s of spec.series) {
-        const v = s.values[c] ?? 0;
-        if (v >= 0) pos += v;
-        else neg += v;
-      }
-      if (neg < sumMin) sumMin = neg;
-      if (pos > sumMax) sumMax = pos;
-    }
-    min = isPercent ? 0 : Math.min(0, sumMin);
-    max = isPercent ? 1 : Math.max(1, sumMax);
-  }
+  const { min, max } = seriesMinMax(spec);
   const range = max - min || 1;
   const groupH = f.plotH / N;
   const gapPctB = (spec.gapWidthPct ?? 150) / 100;
@@ -3096,12 +3106,12 @@ var renderBarChart = (f, spec, colors) => {
         }
         const base = v >= 0 ? posAcc : negAcc;
         const stackedTop = base + v;
-        const y0 = f.plotY + c * groupH + (groupH - barH) / 2;
+        const y0 = f.plotY + (N - 1 - c) * groupH + (groupH - barH) / 2;
         const x0 = f.plotX + (Math.min(base, stackedTop) - min) / range * f.plotW;
         const x1 = f.plotX + (Math.max(base, stackedTop) - min) / range * f.plotW;
         const w = Math.abs(x1 - x0);
         out.push(
-          `<rect x="${px(x0)}" y="${px(y0)}" width="${px(w)}" height="${px(barH)}" fill="${colors[s % colors.length]}"/>`
+          `<rect x="${px(x0)}" y="${px(y0)}" width="${px(w)}" height="${px(barH)}" fill="${spec.series[s]?.color ?? colors[s % colors.length]}"/>`
         );
         if (showLabelForBar(s) && Math.abs(v) > 0) {
           const labelX = (x0 + x1) / 2;
@@ -3115,11 +3125,11 @@ var renderBarChart = (f, spec, colors) => {
       }
     } else {
       const clusterH = barH * clusterUnitsB;
-      const clusterStartY = f.plotY + c * groupH + (groupH - clusterH) / 2;
+      const clusterStartY = f.plotY + (N - 1 - c) * groupH + (groupH - clusterH) / 2;
       const strideB = barH * (1 - overlapPctB);
       for (let s = 0; s < spec.series.length; s++) {
         const v = spec.series[s]?.values[c] ?? 0;
-        const y0 = clusterStartY + s * strideB;
+        const y0 = clusterStartY + (Sb - 1 - s) * strideB;
         const tip = f.plotX + (v - min) / range * f.plotW;
         const x0 = Math.min(tip, baseX);
         const w = Math.abs(tip - baseX);
@@ -3167,24 +3177,7 @@ var renderLineChart = (f, spec, colors, fill) => {
   const grouping = spec.grouping ?? "clustered";
   const isStacked = grouping === "stacked" || grouping === "percentStacked";
   const isPercent = grouping === "percentStacked";
-  let { min, max } = seriesMinMax(spec);
-  if (isStacked) {
-    let sumMin = Infinity;
-    let sumMax = -Infinity;
-    for (let c = 0; c < N; c++) {
-      let pos = 0;
-      let neg = 0;
-      for (const s of spec.series) {
-        const v = s.values[c] ?? 0;
-        if (v >= 0) pos += v;
-        else neg += v;
-      }
-      if (neg < sumMin) sumMin = neg;
-      if (pos > sumMax) sumMax = pos;
-    }
-    min = isPercent ? 0 : Math.min(0, sumMin);
-    max = isPercent ? 1 : Math.max(1, sumMax);
-  }
+  const { min, max } = seriesMinMax(spec);
   const range = max - min || 1;
   const step = N > 1 ? f.plotW / (N - 1) : 0;
   const baseY = f.plotY + f.plotH - (0 - min) / range * f.plotH;
@@ -3245,7 +3238,7 @@ var renderLineChart = (f, spec, colors, fill) => {
     })();
     if (fill) {
       const back = basePts.slice().reverse().map(([xp, yp]) => `L${px(xp)},${px(yp)}`).join(" ");
-      out.push(`<path d="${dPath} ${back} Z" fill="${color}" fill-opacity="0.55" stroke="none"/>`);
+      out.push(`<path d="${dPath} ${back} Z" fill="${color}" stroke="none"/>`);
     }
     const lineWPx = series.lineWidthEmu ? Math.max(0.3, series.lineWidthEmu / EMU_PER_PX) : 1.5;
     const dashAttr = series.lineDash ? (() => {
@@ -3259,8 +3252,9 @@ var renderLineChart = (f, spec, colors, fill) => {
       `<path d="${dPath}" fill="none" stroke="${color}" stroke-width="${lineWPx.toFixed(2)}" stroke-linejoin="round" stroke-linecap="round"${dashAttr}/>`
     );
     if (!isStacked) {
-      const symbol = series.markerSymbol ?? "auto";
-      if (symbol !== "none") {
+      const explicitSymbol = series.markerSymbol !== void 0 && series.markerSymbol !== "auto" && series.markerSymbol !== "none";
+      if (series.markerSymbol !== "none" && !fill && (spec.lineMarkers === true || explicitSymbol)) {
+        const symbol = autoMarkerSymbol(series.markerSymbol, s);
         const size = series.markerSizePt ?? 5;
         const r = Math.max(1, size * 0.5);
         for (const [xp, yp] of pts) {
@@ -3502,7 +3496,7 @@ var renderScatterChart = (f, spec, colors) => {
     const drawMarker = sym === "none" ? false : showMarker || sym !== void 0 && sym !== "auto";
     if (drawMarker) {
       const r = Math.max(1.5, (series.markerSizePt ?? 5) * 0.5);
-      const glyph = sym && sym !== "auto" && sym !== "none" ? sym : "circle";
+      const glyph = autoMarkerSymbol(sym, s);
       for (const [xp, yp] of proj) out.push(seriesMarker(glyph, xp, yp, r, color));
     }
   }
@@ -3625,7 +3619,7 @@ var renderRadarChart = (f, spec, colors) => {
     );
     if (showMarker) {
       const r = Math.max(1.5, (series.markerSizePt ?? 5) * 0.5);
-      const glyph = series.markerSymbol && series.markerSymbol !== "auto" && series.markerSymbol !== "none" ? series.markerSymbol : "circle";
+      const glyph = autoMarkerSymbol(series.markerSymbol, s);
       for (const [xp, yp] of proj) out.push(seriesMarker(glyph, xp, yp, r, color));
     }
   }
@@ -3661,7 +3655,9 @@ var renderChart = (shape, x, y, w, h, transform, theme) => {
   const hiddenSet = new Set(spec.legend?.hiddenIndices ?? []);
   const seriesNamesForLegend = allNamesForLegend.filter((_, i) => !hiddenSet.has(i));
   const seriesColorsForLegend = allColorsForLegend.filter((_, i) => !hiddenSet.has(i));
-  const markerSymbolsForLegend = spec.kind === "line" || spec.kind === "area" ? spec.series.map((s) => s.markerSymbol).filter((_, i) => !hiddenSet.has(i)) : void 0;
+  const explicitMarker = (sym) => sym !== void 0 && sym !== "auto" && sym !== "none";
+  const showsMarkers = spec.kind === "line" && (spec.lineMarkers === true || spec.series.some((s) => explicitMarker(s.markerSymbol)));
+  const markerSymbolsForLegend = showsMarkers ? spec.series.map((s) => s.markerSymbol).filter((_, i) => !hiddenSet.has(i)) : void 0;
   let finiteCount = 0;
   for (const s of spec.series) {
     for (const v of s.values) if (v !== null && Number.isFinite(v)) finiteCount++;
@@ -3684,7 +3680,8 @@ var renderChart = (shape, x, y, w, h, transform, theme) => {
       ...spec.valueAxisLabelRotationDeg !== void 0 ? { labelRotationDeg: spec.valueAxisLabelRotationDeg } : {},
       ...spec.valueAxis?.displayUnits !== void 0 ? { displayUnits: spec.valueAxis.displayUnits } : {}
     };
-    const valueAxis = spec.kind === "bar" ? { orientation: "horizontal", min, max, ...axisExtras } : { orientation: "vertical", min, max, ...axisExtras };
+    const isPercentStacked = spec.grouping === "percentStacked";
+    const valueAxis = spec.kind === "bar" ? { orientation: "horizontal", min, max, percent: isPercentStacked, ...axisExtras } : { orientation: "vertical", min, max, percent: isPercentStacked, ...axisExtras };
     if (!spec.valueAxisHidden) axes = renderValueAxis(f, valueAxis);
     const labelsHidden = spec.categoryAxisHidden || spec.categoryAxisTickLabelPos === "none";
     if (N > 0 && !labelsHidden) {
@@ -3749,8 +3746,11 @@ var renderChart = (shape, x, y, w, h, transform, theme) => {
     `<g${transform}>`,
     // Chart-area backdrop honors <c:chartSpace><c:spPr><a:solidFill> /
     // <a:ln>. plot-area gets its own tinted rect + border when
-    // <c:plotArea><c:spPr> authors them.
-    `<rect x="${px(f.x)}" y="${px(f.y)}" width="${px(f.w)}" height="${px(f.h)}" fill="${spec.chartAreaFill ?? "#FFFFFF"}" stroke="${spec.chartAreaStrokeColor ?? "#E5E7EB"}" stroke-width="0.6"${spec.roundedCorners ? ' rx="6" ry="6"' : ""}/>`,
+    // <c:plotArea><c:spPr> authors them. PowerPoint draws no chart-area
+    // border unless the chartSpace authors an <a:ln>, so the default is
+    // `none` — an invented light-gray frame is the most visible single
+    // divergence from PowerPoint's actual rendering.
+    `<rect x="${px(f.x)}" y="${px(f.y)}" width="${px(f.w)}" height="${px(f.h)}" fill="${spec.chartAreaFill ?? "#FFFFFF"}" stroke="${spec.chartAreaStrokeColor ?? "none"}" stroke-width="0.6"${spec.roundedCorners ? ' rx="6" ry="6"' : ""}/>`,
     spec.plotAreaFill || spec.plotAreaStrokeColor ? `<rect x="${px(f.plotX)}" y="${px(f.plotY)}" width="${px(f.plotW)}" height="${px(f.plotH)}" fill="${spec.plotAreaFill ?? "none"}" stroke="${spec.plotAreaStrokeColor ?? "none"}" stroke-width="0.6"/>` : "",
     renderChartTitle(f, spec.title ?? "", spec.titleStyle),
     axes,