pptx-glimpse 0.4.1 → 0.6.0

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -1580,17 +1570,20 @@ function parseXmlOrdered(xml) {
 }
 
 // src/png/png-converter.ts
-var import_sharp = __toESM(require("sharp"), 1);
+var import_resvg_js = require("@resvg/resvg-js");
 async function svgToPng(svgString, options) {
-  const svgBuffer = Buffer.from(svgString);
-  let pipeline = (0, import_sharp.default)(svgBuffer);
+  const resvgOptions = {};
   if (options?.width) {
-    pipeline = pipeline.resize(options.width);
+    resvgOptions.fitTo = { mode: "width", value: options.width };
   } else if (options?.height) {
-    pipeline = pipeline.resize(null, options.height);
+    resvgOptions.fitTo = { mode: "height", value: options.height };
   }
-  const result = await pipeline.png().toBuffer({ resolveWithObject: true });
-  return { png: result.data, width: result.info.width, height: result.info.height };
+  const rendered = await (0, import_resvg_js.renderAsync)(svgString, resvgOptions);
+  return {
+    png: Buffer.from(rendered.asPng()),
+    width: rendered.width,
+    height: rendered.height
+  };
 }
 
 // src/warning-logger.ts
@@ -2491,10 +2484,19 @@ function extractCategories(serList) {
     if (!cat) continue;
     const strRef = cat.strRef;
     const numRef = cat.numRef;
+    const multiLvlStrRef = cat.multiLvlStrRef;
     const strCache = strRef?.strCache ?? numRef?.numCache;
     if (strCache?.pt) {
       return strCache.pt.slice().sort((a, b) => Number(a["@_idx"]) - Number(b["@_idx"])).map((pt) => String(pt.v ?? ""));
     }
+    const multiCache = multiLvlStrRef?.multiLvlStrCache;
+    if (multiCache?.lvl) {
+      const lvls = Array.isArray(multiCache.lvl) ? multiCache.lvl : [multiCache.lvl];
+      const firstLvl = lvls[0];
+      if (firstLvl?.pt) {
+        return firstLvl.pt.slice().sort((a, b) => Number(a["@_idx"]) - Number(b["@_idx"])).map((pt) => String(pt.v ?? ""));
+      }
+    }
   }
   return [];
 }
@@ -4983,12 +4985,26 @@ function renderBarChart(chart, x, y, w, h) {
     return "";
   }
   const isHorizontal = chart.barDirection === "bar";
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  if (isHorizontal) {
+    for (const tick of ticks) {
+      const ratio = tick / scaleMax;
+      if (ratio < -1e-3 || ratio > 1.001) continue;
+      const tickX = x + ratio * w;
+      parts.push(
+        `<text x="${round(tickX)}" y="${round(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml(formatTickValue(tick))}</text>`
+      );
+    }
+  } else {
+    parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
+  }
   if (isHorizontal) {
     const groupHeight = h / catCount;
     const barHeight = groupHeight * 0.7 / series.length;
@@ -5004,7 +5020,7 @@ function renderBarChart(chart, x, y, w, h) {
       const color = series[s].color;
       for (let c = 0; c < series[s].values.length; c++) {
         const val = series[s].values[c];
-        const barW = val / maxVal * w;
+        const barW = val / scaleMax * w;
         const barX = x;
         const barY = y + c * groupHeight + groupPadding + s * barHeight;
         parts.push(
@@ -5027,7 +5043,7 @@ function renderBarChart(chart, x, y, w, h) {
       const color = series[s].color;
       for (let c = 0; c < series[s].values.length; c++) {
         const val = series[s].values[c];
-        const barH = val / maxVal * h;
+        const barH = val / scaleMax * h;
         const barX = x + c * groupWidth + groupPadding + s * barWidth;
         const barY = y + h - barH;
         parts.push(
@@ -5055,12 +5071,15 @@ function renderLineChart(chart, x, y, w, h) {
     debug("chart.line", "category count is 0");
     return "";
   }
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const divisor = catCount > 1 ? catCount - 1 : 1;
@@ -5074,7 +5093,7 @@ function renderLineChart(chart, x, y, w, h) {
     const divisor = catCount > 1 ? catCount - 1 : 1;
     const points = series[s].values.map((val, i) => {
       const px = round(x + i / divisor * w);
-      const py = round(y + h - val / maxVal * h);
+      const py = round(y + h - val / scaleMax * h);
       return `${px},${py}`;
     });
     parts.push(
@@ -5104,12 +5123,15 @@ function renderAreaChart(chart, x, y, w, h) {
     debug("chart.area", "category count is 0");
     return "";
   }
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const divisor = catCount > 1 ? catCount - 1 : 1;
@@ -5124,7 +5146,7 @@ function renderAreaChart(chart, x, y, w, h) {
     const divisor = catCount > 1 ? catCount - 1 : 1;
     const dataPoints = series[s].values.map((val, i) => {
       const px = round(x + i / divisor * w);
-      const py = round(y + h - val / maxVal * h);
+      const py = round(y + h - val / scaleMax * h);
       return { px, py };
     });
     const topPoints = dataPoints.map((p) => `${p.px},${p.py}`).join(" ");
@@ -5238,12 +5260,15 @@ function renderScatterChart(chart, x, y, w, h) {
   }
   if (maxX === 0) maxX = 1;
   if (maxY === 0) maxY = 1;
+  const yTicks = computeNiceTicks(0, maxY);
+  const scaleMaxY = yTicks[yTicks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(yTicks, 0, scaleMaxY, x, y, h));
   for (let s = 0; s < series.length; s++) {
     const color = series[s].color;
     const xVals = series[s].xValues ?? [];
@@ -5251,7 +5276,7 @@ function renderScatterChart(chart, x, y, w, h) {
       const xVal = xVals[i] ?? i;
       const yVal = series[s].values[i];
       const px = x + xVal / maxX * w;
-      const py = y + h - yVal / maxY * h;
+      const py = y + h - yVal / scaleMaxY * h;
       parts.push(`<circle cx="${round(px)}" cy="${round(py)}" r="4" ${fillAttr(color)}/>`);
     }
   }
@@ -5278,12 +5303,15 @@ function renderBubbleChart(chart, x, y, w, h) {
   if (maxY === 0) maxY = 1;
   if (maxBubble === 0) maxBubble = 1;
   const maxRadius = Math.min(w, h) * 0.08;
+  const yTicks = computeNiceTicks(0, maxY);
+  const scaleMaxY = yTicks[yTicks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(yTicks, 0, scaleMaxY, x, y, h));
   for (let s = 0; s < series.length; s++) {
     const color = series[s].color;
     const xVals = series[s].xValues ?? [];
@@ -5293,7 +5321,7 @@ function renderBubbleChart(chart, x, y, w, h) {
       const yVal = series[s].values[i];
       const size = sizes[i] ?? 1;
       const px = x + xVal / maxX * w;
-      const py = y + h - yVal / maxY * h;
+      const py = y + h - yVal / scaleMaxY * h;
       const r = Math.max(2, Math.sqrt(size / maxBubble) * maxRadius);
       parts.push(
         `<circle cx="${round(px)}" cy="${round(py)}" r="${round(r)}" ${fillAttr(color)} fill-opacity="0.6"/>`
@@ -5406,12 +5434,16 @@ function renderStockChart(chart, x, y, w, h) {
     debug("chart.stock", "max equals min value");
     return "";
   }
+  const ticks = computeNiceTicks(minVal, maxVal);
+  const scaleMin = ticks[0];
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, scaleMin, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const labelX = x + (c + 0.5) * (w / catCount);
@@ -5419,15 +5451,15 @@ function renderStockChart(chart, x, y, w, h) {
       `<text x="${round(labelX)}" y="${round(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml(label)}</text>`
     );
   }
-  const range = maxVal - minVal;
+  const range = scaleMax - scaleMin;
   for (let c = 0; c < catCount; c++) {
     const cx = x + (c + 0.5) * (w / catCount);
     const highVal = highSeries.values[c] ?? 0;
     const lowVal = lowSeries.values[c] ?? 0;
     const closeVal = closeSeries.values[c] ?? 0;
-    const highY = y + h - (highVal - minVal) / range * h;
-    const lowY = y + h - (lowVal - minVal) / range * h;
-    const closeY = y + h - (closeVal - minVal) / range * h;
+    const highY = y + h - (highVal - scaleMin) / range * h;
+    const lowY = y + h - (lowVal - scaleMin) / range * h;
+    const closeY = y + h - (closeVal - scaleMin) / range * h;
     parts.push(
       `<line x1="${round(cx)}" y1="${round(highY)}" x2="${round(cx)}" y2="${round(lowY)}" stroke="#404040" stroke-width="2"/>`
     );
@@ -5660,6 +5692,49 @@ function getPieSliceColor(index, chart) {
   }
   return DEFAULT_SERIES_COLORS[index % DEFAULT_SERIES_COLORS.length];
 }
+function computeNiceTicks(minVal, maxVal, targetCount = 5) {
+  const range = maxVal - minVal;
+  if (range === 0) return [minVal];
+  const roughStep = range / targetCount;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+  const residual = roughStep / magnitude;
+  let niceStep;
+  if (residual <= 1.5) niceStep = magnitude;
+  else if (residual <= 3) niceStep = 2 * magnitude;
+  else if (residual <= 7) niceStep = 5 * magnitude;
+  else niceStep = 10 * magnitude;
+  const niceMin = Math.floor(minVal / niceStep) * niceStep;
+  const niceMax = Math.ceil(maxVal / niceStep) * niceStep;
+  const ticks = [];
+  for (let v = niceMin; v <= niceMax + niceStep * 0.5; v += niceStep) {
+    ticks.push(Math.round(v * 1e10) / 1e10);
+  }
+  return ticks;
+}
+function renderValueAxisLabels(ticks, scaleMin, scaleMax, x, y, h) {
+  const parts = [];
+  const range = scaleMax - scaleMin;
+  if (range === 0) return "";
+  for (const tick of ticks) {
+    const ratio = (tick - scaleMin) / range;
+    if (ratio < -1e-3 || ratio > 1.001) continue;
+    const tickY = y + h - ratio * h;
+    parts.push(
+      `<text x="${round(x - 5)}" y="${round(tickY + 4)}" text-anchor="end" font-size="10" fill="#595959">${escapeXml(formatTickValue(tick))}</text>`
+    );
+    parts.push(
+      `<line x1="${round(x - 3)}" y1="${round(tickY)}" x2="${round(x)}" y2="${round(tickY)}" stroke="#D9D9D9" stroke-width="1"/>`
+    );
+  }
+  return parts.join("");
+}
+function formatTickValue(value) {
+  if (Math.abs(value) >= 1e9) return `${round(value / 1e9)}B`;
+  if (Math.abs(value) >= 1e6) return `${round(value / 1e6)}M`;
+  if (Math.abs(value) >= 1e4) return `${round(value / 1e3)}K`;
+  if (Number.isInteger(value)) return String(value);
+  return String(round(value));
+}
 function getMaxValue(series) {
   let max = 0;
   for (const s of series) {

package/dist/index.js

@@ -1535,17 +1535,20 @@ function parseXmlOrdered(xml) {
 }
 
 // src/png/png-converter.ts
-import sharp from "sharp";
+import { renderAsync } from "@resvg/resvg-js";
 async function svgToPng(svgString, options) {
-  const svgBuffer = Buffer.from(svgString);
-  let pipeline = sharp(svgBuffer);
+  const resvgOptions = {};
   if (options?.width) {
-    pipeline = pipeline.resize(options.width);
+    resvgOptions.fitTo = { mode: "width", value: options.width };
   } else if (options?.height) {
-    pipeline = pipeline.resize(null, options.height);
+    resvgOptions.fitTo = { mode: "height", value: options.height };
   }
-  const result = await pipeline.png().toBuffer({ resolveWithObject: true });
-  return { png: result.data, width: result.info.width, height: result.info.height };
+  const rendered = await renderAsync(svgString, resvgOptions);
+  return {
+    png: Buffer.from(rendered.asPng()),
+    width: rendered.width,
+    height: rendered.height
+  };
 }
 
 // src/warning-logger.ts
@@ -2446,10 +2449,19 @@ function extractCategories(serList) {
     if (!cat) continue;
     const strRef = cat.strRef;
     const numRef = cat.numRef;
+    const multiLvlStrRef = cat.multiLvlStrRef;
     const strCache = strRef?.strCache ?? numRef?.numCache;
     if (strCache?.pt) {
       return strCache.pt.slice().sort((a, b) => Number(a["@_idx"]) - Number(b["@_idx"])).map((pt) => String(pt.v ?? ""));
     }
+    const multiCache = multiLvlStrRef?.multiLvlStrCache;
+    if (multiCache?.lvl) {
+      const lvls = Array.isArray(multiCache.lvl) ? multiCache.lvl : [multiCache.lvl];
+      const firstLvl = lvls[0];
+      if (firstLvl?.pt) {
+        return firstLvl.pt.slice().sort((a, b) => Number(a["@_idx"]) - Number(b["@_idx"])).map((pt) => String(pt.v ?? ""));
+      }
+    }
   }
   return [];
 }
@@ -4938,12 +4950,26 @@ function renderBarChart(chart, x, y, w, h) {
     return "";
   }
   const isHorizontal = chart.barDirection === "bar";
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  if (isHorizontal) {
+    for (const tick of ticks) {
+      const ratio = tick / scaleMax;
+      if (ratio < -1e-3 || ratio > 1.001) continue;
+      const tickX = x + ratio * w;
+      parts.push(
+        `<text x="${round(tickX)}" y="${round(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml(formatTickValue(tick))}</text>`
+      );
+    }
+  } else {
+    parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
+  }
   if (isHorizontal) {
     const groupHeight = h / catCount;
     const barHeight = groupHeight * 0.7 / series.length;
@@ -4959,7 +4985,7 @@ function renderBarChart(chart, x, y, w, h) {
       const color = series[s].color;
       for (let c = 0; c < series[s].values.length; c++) {
         const val = series[s].values[c];
-        const barW = val / maxVal * w;
+        const barW = val / scaleMax * w;
         const barX = x;
         const barY = y + c * groupHeight + groupPadding + s * barHeight;
         parts.push(
@@ -4982,7 +5008,7 @@ function renderBarChart(chart, x, y, w, h) {
       const color = series[s].color;
       for (let c = 0; c < series[s].values.length; c++) {
         const val = series[s].values[c];
-        const barH = val / maxVal * h;
+        const barH = val / scaleMax * h;
         const barX = x + c * groupWidth + groupPadding + s * barWidth;
         const barY = y + h - barH;
         parts.push(
@@ -5010,12 +5036,15 @@ function renderLineChart(chart, x, y, w, h) {
     debug("chart.line", "category count is 0");
     return "";
   }
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const divisor = catCount > 1 ? catCount - 1 : 1;
@@ -5029,7 +5058,7 @@ function renderLineChart(chart, x, y, w, h) {
     const divisor = catCount > 1 ? catCount - 1 : 1;
     const points = series[s].values.map((val, i) => {
       const px = round(x + i / divisor * w);
-      const py = round(y + h - val / maxVal * h);
+      const py = round(y + h - val / scaleMax * h);
       return `${px},${py}`;
     });
     parts.push(
@@ -5059,12 +5088,15 @@ function renderAreaChart(chart, x, y, w, h) {
     debug("chart.area", "category count is 0");
     return "";
   }
+  const ticks = computeNiceTicks(0, maxVal);
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, 0, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const divisor = catCount > 1 ? catCount - 1 : 1;
@@ -5079,7 +5111,7 @@ function renderAreaChart(chart, x, y, w, h) {
     const divisor = catCount > 1 ? catCount - 1 : 1;
     const dataPoints = series[s].values.map((val, i) => {
       const px = round(x + i / divisor * w);
-      const py = round(y + h - val / maxVal * h);
+      const py = round(y + h - val / scaleMax * h);
       return { px, py };
     });
     const topPoints = dataPoints.map((p) => `${p.px},${p.py}`).join(" ");
@@ -5193,12 +5225,15 @@ function renderScatterChart(chart, x, y, w, h) {
   }
   if (maxX === 0) maxX = 1;
   if (maxY === 0) maxY = 1;
+  const yTicks = computeNiceTicks(0, maxY);
+  const scaleMaxY = yTicks[yTicks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(yTicks, 0, scaleMaxY, x, y, h));
   for (let s = 0; s < series.length; s++) {
     const color = series[s].color;
     const xVals = series[s].xValues ?? [];
@@ -5206,7 +5241,7 @@ function renderScatterChart(chart, x, y, w, h) {
       const xVal = xVals[i] ?? i;
       const yVal = series[s].values[i];
       const px = x + xVal / maxX * w;
-      const py = y + h - yVal / maxY * h;
+      const py = y + h - yVal / scaleMaxY * h;
       parts.push(`<circle cx="${round(px)}" cy="${round(py)}" r="4" ${fillAttr(color)}/>`);
     }
   }
@@ -5233,12 +5268,15 @@ function renderBubbleChart(chart, x, y, w, h) {
   if (maxY === 0) maxY = 1;
   if (maxBubble === 0) maxBubble = 1;
   const maxRadius = Math.min(w, h) * 0.08;
+  const yTicks = computeNiceTicks(0, maxY);
+  const scaleMaxY = yTicks[yTicks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(yTicks, 0, scaleMaxY, x, y, h));
   for (let s = 0; s < series.length; s++) {
     const color = series[s].color;
     const xVals = series[s].xValues ?? [];
@@ -5248,7 +5286,7 @@ function renderBubbleChart(chart, x, y, w, h) {
       const yVal = series[s].values[i];
       const size = sizes[i] ?? 1;
       const px = x + xVal / maxX * w;
-      const py = y + h - yVal / maxY * h;
+      const py = y + h - yVal / scaleMaxY * h;
       const r = Math.max(2, Math.sqrt(size / maxBubble) * maxRadius);
       parts.push(
         `<circle cx="${round(px)}" cy="${round(py)}" r="${round(r)}" ${fillAttr(color)} fill-opacity="0.6"/>`
@@ -5361,12 +5399,16 @@ function renderStockChart(chart, x, y, w, h) {
     debug("chart.stock", "max equals min value");
     return "";
   }
+  const ticks = computeNiceTicks(minVal, maxVal);
+  const scaleMin = ticks[0];
+  const scaleMax = ticks[ticks.length - 1];
   parts.push(
     `<line x1="${round(x)}" y1="${round(y + h)}" x2="${round(x + w)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
   parts.push(
     `<line x1="${round(x)}" y1="${round(y)}" x2="${round(x)}" y2="${round(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
   );
+  parts.push(renderValueAxisLabels(ticks, scaleMin, scaleMax, x, y, h));
   for (let c = 0; c < catCount; c++) {
     const label = categories[c] ?? "";
     const labelX = x + (c + 0.5) * (w / catCount);
@@ -5374,15 +5416,15 @@ function renderStockChart(chart, x, y, w, h) {
       `<text x="${round(labelX)}" y="${round(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml(label)}</text>`
     );
   }
-  const range = maxVal - minVal;
+  const range = scaleMax - scaleMin;
   for (let c = 0; c < catCount; c++) {
     const cx = x + (c + 0.5) * (w / catCount);
     const highVal = highSeries.values[c] ?? 0;
     const lowVal = lowSeries.values[c] ?? 0;
     const closeVal = closeSeries.values[c] ?? 0;
-    const highY = y + h - (highVal - minVal) / range * h;
-    const lowY = y + h - (lowVal - minVal) / range * h;
-    const closeY = y + h - (closeVal - minVal) / range * h;
+    const highY = y + h - (highVal - scaleMin) / range * h;
+    const lowY = y + h - (lowVal - scaleMin) / range * h;
+    const closeY = y + h - (closeVal - scaleMin) / range * h;
     parts.push(
       `<line x1="${round(cx)}" y1="${round(highY)}" x2="${round(cx)}" y2="${round(lowY)}" stroke="#404040" stroke-width="2"/>`
     );
@@ -5615,6 +5657,49 @@ function getPieSliceColor(index, chart) {
   }
   return DEFAULT_SERIES_COLORS[index % DEFAULT_SERIES_COLORS.length];
 }
+function computeNiceTicks(minVal, maxVal, targetCount = 5) {
+  const range = maxVal - minVal;
+  if (range === 0) return [minVal];
+  const roughStep = range / targetCount;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+  const residual = roughStep / magnitude;
+  let niceStep;
+  if (residual <= 1.5) niceStep = magnitude;
+  else if (residual <= 3) niceStep = 2 * magnitude;
+  else if (residual <= 7) niceStep = 5 * magnitude;
+  else niceStep = 10 * magnitude;
+  const niceMin = Math.floor(minVal / niceStep) * niceStep;
+  const niceMax = Math.ceil(maxVal / niceStep) * niceStep;
+  const ticks = [];
+  for (let v = niceMin; v <= niceMax + niceStep * 0.5; v += niceStep) {
+    ticks.push(Math.round(v * 1e10) / 1e10);
+  }
+  return ticks;
+}
+function renderValueAxisLabels(ticks, scaleMin, scaleMax, x, y, h) {
+  const parts = [];
+  const range = scaleMax - scaleMin;
+  if (range === 0) return "";
+  for (const tick of ticks) {
+    const ratio = (tick - scaleMin) / range;
+    if (ratio < -1e-3 || ratio > 1.001) continue;
+    const tickY = y + h - ratio * h;
+    parts.push(
+      `<text x="${round(x - 5)}" y="${round(tickY + 4)}" text-anchor="end" font-size="10" fill="#595959">${escapeXml(formatTickValue(tick))}</text>`
+    );
+    parts.push(
+      `<line x1="${round(x - 3)}" y1="${round(tickY)}" x2="${round(x)}" y2="${round(tickY)}" stroke="#D9D9D9" stroke-width="1"/>`
+    );
+  }
+  return parts.join("");
+}
+function formatTickValue(value) {
+  if (Math.abs(value) >= 1e9) return `${round(value / 1e9)}B`;
+  if (Math.abs(value) >= 1e6) return `${round(value / 1e6)}M`;
+  if (Math.abs(value) >= 1e4) return `${round(value / 1e3)}K`;
+  if (Number.isInteger(value)) return String(value);
+  return String(round(value));
+}
 function getMaxValue(series) {
   let max = 0;
   for (const s of series) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pptx-glimpse",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "A lightweight JavaScript library for rendering PowerPoint (.pptx) files as SVG or PNG in Node.js. No LibreOffice required.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -64,10 +64,10 @@
   "author": "hirokisakabe",
   "license": "MIT",
   "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "fast-xml-parser": "^5.3.6",
     "fflate": "^0.8.2",
-    "opentype.js": "^1.3.4",
-    "sharp": "^0.34.5"
+    "opentype.js": "^1.3.4"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
@@ -81,6 +81,7 @@
     "knip": "^5.85.0",
     "pixelmatch": "^7.1.0",
     "prettier": "^3.0.0",
+    "sharp": "^0.34.5",
     "tsup": "^8.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",