csat-chart.js 1.2.0 → 1.5.0

package/dist/csat-chart.cjs

@@ -31,6 +31,7 @@ __export(src_exports, {
   MONTH_LABELS_EN: () => MONTH_LABELS_EN2,
   MONTH_LABELS_NUM: () => MONTH_LABELS_NUM2,
   autoRange: () => autoRange,
+  createAdAsData: () => createAdAsData,
   createDefaultAbsBarData: () => createDefaultAbsBarData,
   createDefaultCategoryDotData: () => createDefaultCategoryDotData,
   createDefaultClimateData: () => createDefaultClimateData,
@@ -38,6 +39,7 @@ __export(src_exports, {
   createDefaultDataTableData: () => createDefaultDataTableData,
   createDefaultDeviationAData: () => createDefaultDeviationAData,
   createDefaultDeviationBData: () => createDefaultDeviationBData,
+  createDefaultEconPlaneData: () => createDefaultEconPlaneData,
   createDefaultGraphOptions: () => createDefaultGraphOptions,
   createDefaultHythergraphData: () => createDefaultHythergraphData,
   createDefaultLineData: () => createDefaultLineData,
@@ -48,6 +50,8 @@ __export(src_exports, {
   createDefaultStackedData: () => createDefaultStackedData,
   createDefaultTernaryData: () => createDefaultTernaryData,
   createDefaultTreemapData: () => createDefaultTreemapData,
+  createPointShiftData: () => createPointShiftData,
+  createSupplyDemandData: () => createSupplyDemandData,
   ensureFonts: () => ensureFonts,
   installRoundRectPolyfill: () => installRoundRectPolyfill,
   isCsatChartType: () => isCsatChartType,
@@ -59,6 +63,7 @@ __export(src_exports, {
   renderDataTable: () => renderDataTable,
   renderDeviationAGraph: () => renderDeviationAGraph,
   renderDeviationBGraph: () => renderDeviationBGraph,
+  renderEconPlane: () => renderEconPlane,
   renderHythergraph: () => renderHythergraph,
   renderLineGraph: () => renderLineGraph,
   renderMatrixTable: () => renderMatrixTable,
@@ -72,13 +77,19 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/core/canvas/renderer.ts
-function getFont(size, family = "serif", customFont, weight = "normal") {
-  const familyMap = {
-    serif: "'Noto Serif KR', 'NanumMyeongjo', serif",
-    sans: "'Noto Sans KR', sans-serif",
-    custom: customFont || "'Noto Serif KR', serif"
-  };
-  return `${weight} ${size}px ${familyMap[family]}`;
+var DEFAULT_SERIF_STACK = "'Noto Serif KR', 'NanumMyeongjo', serif";
+var DEFAULT_SANS_STACK = "'Noto Sans KR', sans-serif";
+var CUSTOM_FALLBACK_STACK = "'Noto Serif KR', serif";
+function fontStackOf(fonts, role) {
+  if (role === "custom") return fonts.customFont || CUSTOM_FALLBACK_STACK;
+  if (role === "sans") return fonts.fontStack?.sans || DEFAULT_SANS_STACK;
+  return fonts.fontStack?.serif || DEFAULT_SERIF_STACK;
+}
+function sansFont(fonts) {
+  return fontStackOf(fonts, "sans");
+}
+function getFont(size, fonts, weight = "normal", role = fonts.fontFamily ?? "serif") {
+  return `${weight} ${size}px ${fontStackOf(fonts, role)}`;
 }
 function clearCanvas(ctx, w, h) {
   ctx.fillStyle = "#fff";
@@ -126,7 +137,6 @@ function autoRange(values, maxTicks = 8) {
 }
 
 // src/core/canvas/labels.ts
-var LABEL_FONT = "'Noto Sans KR', sans-serif";
 var MIN_SHRINK = 0.6;
 function fitFontSize(ctx, text, fontSize, available, makeFont) {
   if (available <= 0) return fontSize;
@@ -136,11 +146,12 @@ function fitFontSize(ctx, text, fontSize, available, makeFont) {
   const scaled = Math.max(fontSize * MIN_SHRINK, fontSize * (available / w));
   return Math.floor(scaled);
 }
-function drawTitle({ ctx, plotX, plotW, title, fontSize, canvasWidth }) {
+function drawTitle({ ctx, plotX, plotW, title, fontSize, fonts, canvasWidth }) {
   if (!title) return;
   ctx.save();
   ctx.fillStyle = "#000";
-  const makeFont = (size2) => `bold ${size2}px ${LABEL_FONT}`;
+  const labelFont = sansFont(fonts);
+  const makeFont = (size2) => `bold ${size2}px ${labelFont}`;
   const centerX = plotX + plotW / 2;
   const available = canvasWidth != null ? Math.max(0, Math.min(centerX, canvasWidth - centerX) * 2 - 12) : plotW;
   const size = fitFontSize(ctx, title, fontSize, available, makeFont);
@@ -161,9 +172,11 @@ function drawSourceAndFootnote({
   sourceInline,
   footnotes,
   fontSize,
+  fonts,
   canvasWidth
 }) {
   ctx.save();
+  const labelFont = sansFont(fonts);
   let leftX = plotX;
   let rightX = plotX + plotW;
   if (canvasWidth != null) {
@@ -178,7 +191,7 @@ function drawSourceAndFootnote({
   let y = height - 6 - totalFootnoteH - (sourceBelow ? sourceH : 0);
   const rightEdge = canvasWidth != null ? rightX : plotX + plotW;
   const available = Math.max(0, rightEdge - leftX);
-  const sourceFont = (size) => `bold ${size}px ${LABEL_FONT}`;
+  const sourceFont = (size) => `bold ${size}px ${labelFont}`;
   if (source && !sourceBelow && !inlineSource) {
     ctx.fillStyle = "#555";
     const size = fitFontSize(ctx, source, fontSize, available, sourceFont);
@@ -195,7 +208,7 @@ function drawSourceAndFootnote({
   for (let i = 0; i < filtered.length; i++) {
     const text = "* " + filtered[i];
     ctx.fillStyle = "#555";
-    const makeFont = (size2) => `${size2}px ${LABEL_FONT}`;
+    const makeFont = (size2) => `${size2}px ${labelFont}`;
     const size = fitFontSize(ctx, text, fontSize * 0.9, footnoteAvailable, makeFont);
     ctx.font = makeFont(size);
     ctx.textAlign = "left";
@@ -213,7 +226,7 @@ function drawSourceAndFootnote({
     ctx.fillText(source, rightX, lastFootnoteY, inlineSourceW > 0 ? inlineSourceW : void 0);
   }
   if (sourceBelow) {
-    const makeFont = (size) => `bold ${size}px ${LABEL_FONT}`;
+    const makeFont = (size) => `bold ${size}px ${labelFont}`;
     const half = available > 0 ? available / 2 : 0;
     ctx.fillStyle = "#555";
     ctx.textBaseline = "bottom";
@@ -491,8 +504,7 @@ function drawYAxis({
   step,
   label,
   side,
-  fontFamily,
-  customFont,
+  fonts,
   tickFontSize,
   labelFontSize,
   drawGrid = false
@@ -506,7 +518,7 @@ function drawYAxis({
   ctx.lineTo(x, plot.y + plot.h);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(tickFontSize, fontFamily, customFont, "bold");
+  ctx.font = getFont(tickFontSize, fonts, "bold");
   ctx.textBaseline = "middle";
   ctx.textAlign = side === "left" ? "right" : "left";
   const ticks = [];
@@ -548,7 +560,7 @@ function drawYAxis({
   }
   if (label) {
     ctx.save();
-    const makeFont = (size) => getFont(size, fontFamily, customFont, "bold");
+    const makeFont = (size) => getFont(size, fonts, "bold");
     ctx.fillStyle = "#000";
     ctx.textBaseline = "bottom";
     ctx.textAlign = side === "left" ? "right" : "left";
@@ -566,8 +578,7 @@ function drawXAxis({
   height,
   labels,
   indices,
-  fontFamily,
-  customFont,
+  fonts,
   tickFontSize
 }) {
   const plot = plotArea(padding, width, height);
@@ -579,7 +590,7 @@ function drawXAxis({
   ctx.lineTo(plot.x + plot.w, y);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(tickFontSize, fontFamily, customFont, "bold");
+  ctx.font = getFont(tickFontSize, fonts, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   const showIndices = indices ?? labels.map((_, i) => i);
@@ -686,14 +697,17 @@ function drawInsideIcon(ctx, item, x, cy, size) {
     ctx.lineTo(x + w, cy);
     ctx.stroke();
     ctx.setLineDash([]);
-    ctx.fillStyle = item.fillStyle;
+    ctx.fillStyle = item.hollow ? "#fff" : item.fillStyle;
+    if (item.hollow) ctx.lineWidth = 1.5;
     const r = size * 0.3;
     if (item.marker === "square") {
       ctx.fillRect(x + w / 2 - r, cy - r, r * 2, r * 2);
+      if (item.hollow) ctx.strokeRect(x + w / 2 - r, cy - r, r * 2, r * 2);
     } else {
       ctx.beginPath();
       ctx.arc(x + w / 2, cy, r, 0, Math.PI * 2);
       ctx.fill();
+      if (item.hollow) ctx.stroke();
     }
     return;
   }
@@ -704,14 +718,13 @@ function drawInsideIcon(ctx, item, x, cy, size) {
   ctx.strokeRect(x, cy - size / 2, size, size);
 }
 var LINE_ICON_SIZE = 36;
-var LEGEND_FONT = "'Noto Sans KR', sans-serif";
 var ICON_GAP = 10;
 var BOX_PADDING = 12;
 var ITEM_SPACING = 30;
 var ROW_GAP = 6;
-function measureLegendWidth(ctx, labels, fontSize, iconType = "rect") {
+function measureLegendWidth(ctx, labels, fontSize, fonts, iconType = "rect") {
   ctx.save();
-  ctx.font = `bold ${fontSize}px ${LEGEND_FONT}`;
+  ctx.font = `bold ${fontSize}px ${sansFont(fonts)}`;
   const iconSize = iconType === "line" ? LINE_ICON_SIZE : 16;
   const iconGap = 10;
   const padding = 12;
@@ -719,11 +732,12 @@ function measureLegendWidth(ctx, labels, fontSize, iconType = "rect") {
   ctx.restore();
   return maxW + padding * 2 + 30;
 }
-function layoutBottomLegend(ctx, labels, iconWidths, fontSize, boxW, opts = {}) {
+function layoutBottomLegend(ctx, labels, iconWidths, fontSize, boxW, fonts, opts = {}) {
   const iconGap = opts.iconGap ?? ICON_GAP;
   const padding = opts.padding ?? BOX_PADDING;
   const spacing = opts.spacing ?? ITEM_SPACING;
-  const fontOf = (fs2) => opts.font ? withFontSize(opts.font, fs2) : `bold ${fs2}px ${LEGEND_FONT}`;
+  const legendFont = sansFont(fonts);
+  const fontOf = (fs2) => opts.font ? withFontSize(opts.font, fs2) : `bold ${fs2}px ${legendFont}`;
   const inner = Math.max(1, boxW - padding * 2);
   ctx.save();
   const widthsAt = (fs2) => {
@@ -760,11 +774,11 @@ function layoutBottomLegend(ctx, labels, iconWidths, fontSize, boxW, opts = {})
     boxH: rows.length * lineHeight + (rows.length - 1) * ROW_GAP + padding * 2
   };
 }
-function measureBottomLegend(ctx, labels, fontSize, plotW, iconType = "rect", bottomOffset = 50) {
+function measureBottomLegend(ctx, labels, fontSize, plotW, fonts, iconType = "rect", bottomOffset = 50) {
   if (labels.length === 0) return 0;
   const sizeOf = (t) => t === "line" ? LINE_ICON_SIZE : 16;
   const iconWidths = labels.map((_, i) => sizeOf(Array.isArray(iconType) ? iconType[i] ?? "rect" : iconType));
-  const { boxH } = layoutBottomLegend(ctx, labels, iconWidths, fontSize, plotW);
+  const { boxH } = layoutBottomLegend(ctx, labels, iconWidths, fontSize, plotW, fonts);
   return bottomOffset + boxH + 2;
 }
 function drawLegend({
@@ -778,12 +792,14 @@ function drawLegend({
   canvasW,
   canvasH,
   fontSize,
+  fonts,
   bottomOffset = 50,
   rightGap = 20
 }) {
   if (items.length === 0) return 0;
+  const legendFont = sansFont(fonts);
   ctx.save();
-  ctx.font = `bold ${fontSize}px ${LEGEND_FONT}`;
+  ctx.font = `bold ${fontSize}px ${legendFont}`;
   const iconGap = ICON_GAP;
   const padding = BOX_PADDING;
   const lineHeight = fontSize + 8;
@@ -796,7 +812,8 @@ function drawLegend({
       items.map((i) => i.label),
       items.map(iconWidthOf),
       fontSize,
-      boxW
+      boxW,
+      fonts
     );
     const boxH = layout.boxH;
     const boxX = plotX;
@@ -817,7 +834,7 @@ function drawLegend({
         const item = items[index];
         const iSize = iconWidthOf(item);
         drawIcon(ctx, item, cx, cy, iSize);
-        ctx.font = `bold ${layout.fontSize}px ${LEGEND_FONT}`;
+        ctx.font = `bold ${layout.fontSize}px ${legendFont}`;
         ctx.fillStyle = "#000";
         ctx.textAlign = "left";
         ctx.textBaseline = "middle";
@@ -846,7 +863,7 @@ function drawLegend({
       const ix = boxX + padding;
       const iSize = iconWidthOf(item);
       drawIcon(ctx, item, ix, cy, iSize);
-      ctx.font = `bold ${fontSize}px ${LEGEND_FONT}`;
+      ctx.font = `bold ${fontSize}px ${legendFont}`;
       ctx.fillStyle = "#000";
       ctx.textAlign = "left";
       ctx.textBaseline = "middle";
@@ -1047,10 +1064,8 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
   const showLegend = options.showLegend;
   const legendPos = options.legendPosition;
-  const legendW = showLegend && legendPos === "right" && !data.insideLegend ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" && !data.insideLegend ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const isVertical = data.barDirection === "vertical";
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const n = data.categories.length;
   const sCount = data.seriesLabels.length;
   const hasGroups = !isVertical && !!data.groups && data.groups.length > 0;
@@ -1059,18 +1074,18 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
   let unitW = 0;
   if (hasGroups || data.unitAdjacent || data.insideLegend) {
     ctx.save();
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     if (hasGroups) {
       groupLabelW = widestLabel(ctx, data.groups.map((g) => g.label));
       catLabelW = widestLabel(ctx, data.categories.map((c) => c.label));
     }
-    ctx.font = getFont(options.fontSize.axisLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
     unitW = ctx.measureText(data.unit).width;
     ctx.restore();
   }
   const padRight = isVertical ? 60 + legendW : data.unitAdjacent ? 40 + unitW : 160 + legendW;
   const padLeft = isVertical ? 130 : hasGroups ? 20 + groupLabelW + 14 + catLabelW + 12 : 100;
-  const legendReserve = showLegend && legendPos === "bottom" && !data.insideLegend ? measureBottomLegend(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, w - padLeft - padRight) : 0;
+  const legendReserve = showLegend && legendPos === "bottom" && !data.insideLegend ? measureBottomLegend(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, w - padLeft - padRight, options) : 0;
   const padding = {
     top: options.title ? 100 : 50,
     right: padRight,
@@ -1134,8 +1149,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
       step: axis.step,
       label: data.unit,
       side: "left",
-      fontFamily: font,
-      customFont,
+      fonts: options,
       tickFontSize: options.fontSize.tick,
       labelFontSize: options.fontSize.axisLabel,
       drawGrid: true
@@ -1165,7 +1179,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
           ctx.strokeRect(cx - barW / 2, y, barW, barH);
           if (options.showDataLabels && barH > options.fontSize.dataLabel) {
             ctx.fillStyle = isLightFill(s) ? "#000" : "#fff";
-            ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+            ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(String(val), cx, y + barH / 2);
@@ -1191,7 +1205,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
           ctx.strokeRect(bx, by, barW, barH);
           if (options.showDataLabels && barH > options.fontSize.dataLabel) {
             ctx.fillStyle = isLightFill(s) ? "#000" : "#fff";
-            ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+            ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
             ctx.textAlign = "center";
             ctx.textBaseline = "bottom";
             ctx.fillText(String(val), bx + barW / 2, by - 4);
@@ -1211,7 +1225,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
     }
     const labelY = data.categoryLabelAtBaseline ? baseY + 6 : plotY + plotH + 12;
     ctx.fillStyle = "#000";
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.textAlign = "center";
     ctx.textBaseline = "top";
     const catStride = labelStride(catArea, widestLabel(ctx, data.categories.map((c) => c.label)));
@@ -1235,7 +1249,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
     if (ticks.length === 0 || Math.abs(ticks[ticks.length - 1] - axis.max) > 1e-9) {
       ticks.push(axis.max);
     }
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.fillStyle = "#000";
     ctx.textAlign = "center";
     ctx.textBaseline = "top";
@@ -1263,7 +1277,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
         ctx.restore();
       }
     }
-    ctx.font = getFont(options.fontSize.axisLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
     ctx.fillStyle = "#000";
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
@@ -1303,7 +1317,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
           ctx.strokeRect(bx, cy - barH / 2, bw, barH);
           if (options.showDataLabels && bw > options.fontSize.dataLabel * 2) {
             ctx.fillStyle = isLightFill(s) ? "#000" : "#fff";
-            ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+            ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(String(val), bx + bw / 2, cy);
@@ -1329,7 +1343,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
           ctx.strokeRect(bx, by, bw, barH);
           if (options.showDataLabels && bw > options.fontSize.dataLabel * 2) {
             ctx.fillStyle = isLightFill(s) ? "#000" : "#fff";
-            ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+            ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(String(val), bx + bw + 4, by + barH / 2);
@@ -1341,7 +1355,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
     const catLabelX = hasGroups ? plotX - 12 : plotX - 10;
     for (let c = 0; c < n; c++) {
       ctx.fillStyle = "#000";
-      ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.tick, options, "bold");
       ctx.textAlign = "right";
       ctx.textBaseline = "middle";
       ctx.fillText(data.categories[c].label, catLabelX, centerY[c]);
@@ -1355,7 +1369,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
       }
     }
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   if (showLegend && data.insideLegend) {
     drawInsideLegend({
       ctx,
@@ -1372,7 +1386,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
       canvasW: w,
       canvasH: h,
       fontSize: options.fontSize.dataLabel * 0.9,
-      font: getFont(options.fontSize.dataLabel * 0.9, font, customFont, "bold"),
+      font: getFont(options.fontSize.dataLabel * 0.9, options, "bold"),
       avoid: barRects
     });
   } else if (showLegend) {
@@ -1385,6 +1399,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
     }));
     drawLegend({
       ctx,
+      fonts: options,
       items,
       position: legendPos,
       plotX,
@@ -1396,7 +1411,7 @@ function renderAbsBarGraph(ctx, w, h, data, options) {
       fontSize: options.fontSize.dataLabel * 0.85 + 5
     });
   }
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
 function formatTick2(val) {
   if (Number.isInteger(val)) return val.toString();
@@ -1411,6 +1426,7 @@ function createDefaultGraphOptions() {
     footnotes: [""],
     fontFamily: "serif",
     customFont: "",
+    fontStack: {},
     fontSize: {
       title: 36,
       axisLabel: 28,
@@ -1593,6 +1609,60 @@ function createDefaultCubeData() {
   };
 }
 
+// src/core/types/econplane.ts
+function createSupplyDemandData() {
+  return {
+    quadrants: "first",
+    xAxis: { label: "\uC218\uB7C9(kg)", min: 0, max: 9, ticks: [1, 2, 3, 4, 5, 6, 7, 8], broken: false },
+    yAxis: { label: "\uAC00\uACA9(\uCC9C \uC6D0)", min: 0, max: 9, ticks: [1, 2, 3, 4, 5, 6, 7, 8], broken: false },
+    grid: true,
+    dash: "dashed",
+    lines: [
+      { label: "\uC218\uC694", from: { x: 0, y: 8 }, to: { x: 8, y: 0 }, labelAt: "to" },
+      { label: "\uACF5\uAE09", from: { x: 0, y: 0 }, to: { x: 8, y: 8 }, labelAt: "to" }
+    ],
+    points: [{ x: 4, y: 4, label: "E", labelPos: "top", guide: "none", dot: true }],
+    arrows: []
+  };
+}
+function createAdAsData() {
+  return {
+    quadrants: "first",
+    xAxis: { label: "\uC2E4\uC9C8 GDP", min: 0, max: 10, ticks: [], broken: false },
+    yAxis: { label: "\uBB3C\uAC00", min: 0, max: 10, ticks: [], broken: false },
+    grid: false,
+    dash: "dashed",
+    lines: [
+      { label: "\uCD1D\uC218\uC694", from: { x: 1, y: 8.5 }, to: { x: 8.5, y: 1 }, labelAt: "to" },
+      { label: "\uCD1D\uACF5\uAE09", from: { x: 1, y: 1 }, to: { x: 8.5, y: 8.5 }, labelAt: "to" }
+    ],
+    points: [{ x: 4.75, y: 4.75, label: "E", labelPos: "right", guide: "none", dot: true }],
+    arrows: []
+  };
+}
+function createPointShiftData() {
+  return {
+    quadrants: "first",
+    xAxis: { label: "\uC218\uB7C9(\uB9CC \uAC1C)", min: 0, max: 18, ticks: [5, 10, 15], broken: false },
+    yAxis: { label: "\uAC00\uACA9(\uB2EC\uB7EC)", min: 0, max: 18, ticks: [10, 15], broken: false },
+    grid: false,
+    dash: "dashed",
+    lines: [],
+    points: [
+      { x: 5, y: 10, label: "E", labelPos: "top", guide: "both", dot: true },
+      { x: 10, y: 10, label: "A", labelPos: "top", guide: "both", dot: true },
+      { x: 15, y: 15, label: "B", labelPos: "top", guide: "both", dot: true }
+    ],
+    arrows: [
+      { from: { x: 5, y: 10 }, to: { x: 10, y: 10 }, offset: 0, shorten: 10, label: "", labelPos: "top" },
+      { from: { x: 10, y: 10 }, to: { x: 15, y: 15 }, offset: 0, shorten: 10, label: "", labelPos: "top" }
+    ]
+  };
+}
+function createDefaultEconPlaneData() {
+  return createSupplyDemandData();
+}
+
 // src/core/types/radar.ts
 function createDefaultRadarData() {
   return {
@@ -1713,15 +1783,13 @@ function drawMarker(ctx, marker, cx, cy, r) {
 }
 function renderCategoryDotGraph(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const n = data.categories.length;
   const sCount = data.seriesLabels.length;
   const markers = data.seriesMarkers ?? DOT_MARKER_ORDER;
   const showLegend = options.showLegend && sCount > 1;
   const legendPos = options.legendPosition;
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, "circle") : 0;
-  const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85, w - 130 - (60 + legendW), "circle") : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, options, "circle") : 0;
+  const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85, w - 130 - (60 + legendW), options, "circle") : 0;
   const padding = {
     top: options.title ? 100 : 50,
     right: 60 + legendW,
@@ -1766,8 +1834,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
     step: axis.step,
     label: data.unit,
     side: "left",
-    fontFamily: font,
-    customFont,
+    fonts: options,
     tickFontSize: options.fontSize.tick,
     labelFontSize: options.fontSize.axisLabel,
     drawGrid: true
@@ -1790,7 +1857,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
       ctx.fillStyle = "#000";
       drawMarker(ctx, markers[s % markers.length], cx, cy, data.dotRadius);
       if (options.showDataLabels) {
-        ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+        ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
         ctx.textAlign = "center";
         ctx.textBaseline = "bottom";
         ctx.fillText(String(val), cx, cy - data.dotRadius - 4);
@@ -1811,7 +1878,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
     }
   }
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   for (let c = 0; c < n; c++) {
@@ -1819,7 +1886,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
     ctx.fillText(data.categories[c].label, cx, plotY + plotH + 12);
   }
   if (options.title) {
-    drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title });
+    drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title });
   }
   if (showLegend) {
     const items = data.seriesLabels.map((label) => ({
@@ -1829,6 +1896,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
     }));
     drawLegend({
       ctx,
+      fonts: options,
       items,
       position: legendPos,
       plotX,
@@ -1842,6 +1910,7 @@ function renderCategoryDotGraph(ctx, w, h, data, options) {
   }
   drawSourceAndFootnote({
     ctx,
+    fonts: options,
     plotX,
     plotW,
     height: h,
@@ -1885,15 +1954,13 @@ function drawMarker2(ctx, marker, cx, cy, r, hollow) {
 }
 function renderLineGraph(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const n = data.xLabels.length;
   const useLegend = data.labelPlacement === "legend" && options.showLegend;
   const legendPos = options.legendPosition;
-  const legendW = useLegend && legendPos === "right" ? measureLegendWidth(ctx, data.series.map((s) => s.label), options.fontSize.dataLabel * 0.85 + 5, "line") : 0;
-  ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+  const legendW = useLegend && legendPos === "right" ? measureLegendWidth(ctx, data.series.map((s) => s.label), options.fontSize.dataLabel * 0.85 + 5, options, "line") : 0;
+  ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
   const endLabelW = data.labelPlacement === "lineEnd" ? widestLabel(ctx, data.series.map((s) => s.label)) + 16 : 0;
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   const xUnitW = data.xUnit ? ctx.measureText(data.xUnit).width + ctx.measureText(data.xLabels[n - 1] ?? "").width / 2 + 12 : 0;
   const padRight = 24 + legendW + Math.max(endLabelW, xUnitW);
   const legendReserve = useLegend && legendPos === "bottom" && !data.insideLegend ? measureBottomLegend(
@@ -1901,6 +1968,7 @@ function renderLineGraph(ctx, w, h, data, options) {
     data.series.map((s) => s.label),
     options.fontSize.dataLabel * 0.85,
     w - 130 - padRight,
+    options,
     "line"
   ) : 0;
   const padding = {
@@ -1949,8 +2017,7 @@ function renderLineGraph(ctx, w, h, data, options) {
     step: axis.step,
     label: data.yUnit,
     side: "left",
-    fontFamily: font,
-    customFont,
+    fonts: options,
     tickFontSize: options.fontSize.tick,
     labelFontSize: options.fontSize.axisLabel,
     drawGrid: true
@@ -2042,7 +2109,7 @@ function renderLineGraph(ctx, w, h, data, options) {
   }
   if (data.labelPlacement === "lineEnd") {
     ctx.fillStyle = "#000";
-    ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
     const placer = new LabelPlacer();
     const lineHeight = options.fontSize.dataLabel * 1.1;
     const columnX = plotX + plotW + 10;
@@ -2072,7 +2139,7 @@ function renderLineGraph(ctx, w, h, data, options) {
     });
   }
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   const xStride = labelStride(stepX, widestLabel(ctx, data.xLabels));
@@ -2086,11 +2153,11 @@ function renderLineGraph(ctx, w, h, data, options) {
     ctx.fillText(data.xUnit, plotX + plotW + lastLabelHalf + 6, plotY + plotH + 10);
   }
   if (options.title) {
-    drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+    drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   }
   if (useLegend && data.insideLegend) {
     ctx.save();
-    ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
     const rowH = options.fontSize.dataLabel * 1.15;
     const swatch = rowH * 0.75;
     const boxW = swatch + 6 + widestLabel(ctx, data.series.map((s) => s.label)) + 10;
@@ -2122,6 +2189,7 @@ function renderLineGraph(ctx, w, h, data, options) {
     }));
     drawLegend({
       ctx,
+      fonts: options,
       items,
       position: legendPos,
       plotX,
@@ -2135,6 +2203,7 @@ function renderLineGraph(ctx, w, h, data, options) {
   }
   drawSourceAndFootnote({
     ctx,
+    fonts: options,
     plotX,
     plotW,
     height: h,
@@ -2155,9 +2224,8 @@ function renderMatrixTable(ctx, w, h, data, options) {
   const n = data.names.length;
   if (n === 0) return;
   const font = options.fontFamily;
-  const customFont = options.customFont;
   const base = options.fontSize.tick;
-  ctx.font = getFont(base, font, customFont, "bold");
+  ctx.font = getFont(base, options, "bold");
   const widest = Math.max(
     ...data.names.map((t) => ctx.measureText(t).width),
     ...cellValues(data).map((v) => ctx.measureText(formatValue(v, data.groupThousands)).width)
@@ -2184,7 +2252,7 @@ function renderMatrixTable(ctx, w, h, data, options) {
   const centered = top + unitH + Math.max(0, (h - top - unitH - footH - tableH) / 2);
   const tableY = Math.max(top + unitH, Math.min(centered, h - footH - tableH));
   if (data.unit) {
-    ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
     ctx.fillStyle = "#000";
     ctx.textAlign = "right";
     ctx.textBaseline = "bottom";
@@ -2204,11 +2272,11 @@ function renderMatrixTable(ctx, w, h, data, options) {
       ctx.fillStyle = "#000";
       if (isName) {
         const family = data.nameIsSymbol && !data.nameIsSymbol[i] ? "sans" : font;
-        ctx.font = getFont(cellFontSize, family, customFont, "bold");
+        ctx.font = getFont(cellFontSize, options, "bold", family);
         ctx.textAlign = "center";
         ctx.fillText(data.names[i], x + cellW / 2, y + cellH / 2);
       } else {
-        ctx.font = getFont(cellFontSize, font, customFont, "bold");
+        ctx.font = getFont(cellFontSize, options, "bold");
         ctx.textAlign = "right";
         ctx.fillText(
           formatValue(data.values[i]?.[j] ?? 0, data.groupThousands),
@@ -2218,9 +2286,10 @@ function renderMatrixTable(ctx, w, h, data, options) {
       }
     }
   }
-  drawTitle({ ctx, plotX: tableX, plotW: tableW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX: tableX, plotW: tableW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   drawSourceAndFootnote({
     ctx,
+    fonts: options,
     plotX: tableX,
     plotW: tableW,
     height: h,
@@ -2254,12 +2323,11 @@ function renderDataTable(ctx, w, h, data, options) {
   const rows = data.rows.length;
   if (cols === 0 || rows === 0) return;
   const font = options.fontFamily;
-  const customFont = options.customFont;
   const base = options.fontSize.tick;
-  ctx.font = getFont(base, font, customFont, "bold");
+  ctx.font = getFont(base, options, "bold");
   const labelTextW = Math.max(
     ctx.measureText(data.cornerLabel).width,
-    ...data.rows.map((r) => rowLabelWidth(ctx, r, base, font, customFont))
+    ...data.rows.map((r) => rowLabelWidth(ctx, r, base, options))
   );
   const valueTextW = Math.max(
     ...data.columns.map((c) => ctx.measureText(c).width),
@@ -2294,17 +2362,17 @@ function renderDataTable(ctx, w, h, data, options) {
   ctx.fillStyle = "#000";
   ctx.textBaseline = "middle";
   ctx.textAlign = "center";
-  ctx.font = getFont(cellFontSize, font, customFont, "bold");
+  ctx.font = getFont(cellFontSize, options, "bold");
   ctx.fillText(data.cornerLabel, tableX + labelW / 2, tableY + cellH / 2, labelW - pad * 2);
   data.columns.forEach((name, j) => {
     const family = data.columnIsSymbol && !data.columnIsSymbol[j] ? "sans" : font;
-    ctx.font = getFont(cellFontSize, family, customFont, "bold");
+    ctx.font = getFont(cellFontSize, options, "bold", family);
     ctx.fillText(name, columnX(j) + valueW / 2, tableY + cellH / 2, valueW - pad * 2);
   });
   data.rows.forEach((row, i) => {
     const y = tableY + cellH * (i + 1);
-    drawRowLabel(ctx, row, tableX + labelW / 2, y + cellH / 2, cellFontSize, font, customFont);
-    ctx.font = getFont(cellFontSize, font, customFont, "bold");
+    drawRowLabel(ctx, row, tableX + labelW / 2, y + cellH / 2, cellFontSize, options);
+    ctx.font = getFont(cellFontSize, options, "bold");
     ctx.textAlign = "right";
     for (let j = 0; j < cols; j++) {
       const v = row.values[j];
@@ -2330,9 +2398,10 @@ function renderDataTable(ctx, w, h, data, options) {
   }
   ctx.lineWidth = 2;
   ctx.strokeRect(tableX, tableY, tableW, tableH);
-  drawTitle({ ctx, plotX: tableX, plotW: tableW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX: tableX, plotW: tableW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   drawSourceAndFootnote({
     ctx,
+    fonts: options,
     plotX: tableX,
     plotW: tableW,
     height: h,
@@ -2348,30 +2417,30 @@ function line(ctx, x1, y1, x2, y2) {
   ctx.lineTo(x2, y2);
   ctx.stroke();
 }
-function rowLabelWidth(ctx, row, size, font, customFont) {
-  ctx.font = getFont(size, font, customFont, "bold");
+function rowLabelWidth(ctx, row, size, options) {
+  ctx.font = getFont(size, options, "bold");
   const labelW = ctx.measureText(row.label).width;
   if (!row.unit) return labelW;
-  ctx.font = getFont(size * UNIT_RATIO, font, customFont, "bold");
+  ctx.font = getFont(size * UNIT_RATIO, options, "bold");
   return labelW + ctx.measureText(row.unit).width;
 }
-function drawRowLabel(ctx, row, cx, cy, size, font, customFont) {
+function drawRowLabel(ctx, row, cx, cy, size, options) {
   ctx.fillStyle = "#000";
   ctx.textBaseline = "middle";
-  ctx.font = getFont(size, font, customFont, "bold");
+  ctx.font = getFont(size, options, "bold");
   const labelW = ctx.measureText(row.label).width;
   if (!row.unit) {
     ctx.textAlign = "center";
     ctx.fillText(row.label, cx, cy);
     return;
   }
-  ctx.font = getFont(size * UNIT_RATIO, font, customFont, "bold");
+  ctx.font = getFont(size * UNIT_RATIO, options, "bold");
   const unitW = ctx.measureText(row.unit).width;
   const startX = cx - (labelW + unitW) / 2;
   ctx.textAlign = "left";
-  ctx.font = getFont(size, font, customFont, "bold");
+  ctx.font = getFont(size, options, "bold");
   ctx.fillText(row.label, startX, cy);
-  ctx.font = getFont(size * UNIT_RATIO, font, customFont, "bold");
+  ctx.font = getFont(size * UNIT_RATIO, options, "bold");
   ctx.fillText(row.unit, startX + labelW, cy);
   ctx.textAlign = "center";
 }
@@ -2384,6 +2453,571 @@ function formatValue2(v, decimals = 1, groupThousands = true) {
   return frac ? `${grouped}.${frac}` : grouped;
 }
 
+// src/core/canvas/subscript.ts
+var SUB_SCALE = 0.65;
+var SUB_DROP = 0.16;
+var SUB_CHARS = /[0-9A-Za-z]/;
+var HAS_SUB = /_[0-9A-Za-z]/;
+function parseRich(text) {
+  if (!HAS_SUB.test(text)) return [{ text, sub: false }];
+  const runs = [];
+  let plain = "";
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === "_" && i + 1 < text.length && SUB_CHARS.test(text[i + 1])) {
+      let j = i + 1;
+      while (j < text.length && SUB_CHARS.test(text[j])) j++;
+      if (plain) {
+        runs.push({ text: plain, sub: false });
+        plain = "";
+      }
+      runs.push({ text: text.slice(i + 1, j), sub: true });
+      i = j - 1;
+      continue;
+    }
+    plain += text[i];
+  }
+  if (plain) runs.push({ text: plain, sub: false });
+  return runs;
+}
+function isPlain(runs) {
+  return runs.length === 1 && !runs[0].sub;
+}
+function richWidth(ctx, text, size, makeFont) {
+  const runs = parseRich(text);
+  const base = makeFont(size);
+  if (isPlain(runs)) {
+    ctx.font = base;
+    return ctx.measureText(text).width;
+  }
+  const sub = makeFont(size * SUB_SCALE);
+  let w = 0;
+  for (const r of runs) {
+    ctx.font = r.sub ? sub : base;
+    w += ctx.measureText(r.text).width;
+  }
+  ctx.font = base;
+  return w;
+}
+function richExtent(ctx, text, size, makeFont) {
+  const runs = parseRich(text);
+  const base = makeFont(size);
+  if (isPlain(runs)) {
+    ctx.font = base;
+    return textExtent(ctx, text);
+  }
+  const subFont = makeFont(size * SUB_SCALE);
+  const drop = size * SUB_DROP;
+  let w = 0;
+  let up = 0;
+  let down = 0;
+  for (const r of runs) {
+    ctx.font = r.sub ? subFont : base;
+    const e = textExtent(ctx, r.text);
+    w += e.left + e.right;
+    up = Math.max(up, r.sub ? e.up - drop : e.up);
+    down = Math.max(down, r.sub ? e.down + drop : e.down);
+  }
+  ctx.font = base;
+  const left = ctx.textAlign === "right" || ctx.textAlign === "end" ? w : ctx.textAlign === "center" ? w / 2 : 0;
+  return { left, right: w - left, up, down };
+}
+function fillRich(ctx, text, x, y, size, makeFont) {
+  const runs = parseRich(text);
+  const base = makeFont(size);
+  if (isPlain(runs)) {
+    ctx.font = base;
+    ctx.fillText(text, x, y);
+    return;
+  }
+  const subFont = makeFont(size * SUB_SCALE);
+  const drop = size * SUB_DROP;
+  let total = 0;
+  for (const r of runs) {
+    ctx.font = r.sub ? subFont : base;
+    total += ctx.measureText(r.text).width;
+  }
+  const align = ctx.textAlign;
+  let cx = align === "right" || align === "end" ? x - total : align === "center" ? x - total / 2 : x;
+  ctx.textAlign = "left";
+  for (const r of runs) {
+    ctx.font = r.sub ? subFont : base;
+    ctx.fillText(r.text, cx, r.sub ? y + drop : y);
+    cx += ctx.measureText(r.text).width;
+  }
+  ctx.textAlign = align;
+  ctx.font = base;
+}
+function shrinkRichToWidth(ctx, texts, size, available, makeFont, minScale = MIN_SCALE) {
+  if (available <= 0 || texts.length === 0) return size;
+  const saved = ctx.font;
+  const w = Math.max(...texts.map((t) => richWidth(ctx, t, size, makeFont)));
+  ctx.font = saved;
+  if (w <= available) return size;
+  return Math.max(size * minScale, size * (available / w));
+}
+function nudgeRichInside(ctx, text, x, y, canvasW, canvasH, size, makeFont, margin = EDGE) {
+  const e = richExtent(ctx, text, size, makeFont);
+  let nx = x;
+  let ny = y;
+  if (x - e.left < margin) nx = margin + e.left;
+  else if (x + e.right > canvasW - margin) nx = canvasW - margin - e.right;
+  if (y - e.up < margin) ny = margin + e.up;
+  else if (y + e.down > canvasH - margin) ny = canvasH - margin - e.down;
+  return { x: nx, y: ny };
+}
+function drawFloatingRich(ctx, text, x, y, canvasW, canvasH, fontSize, makeFont) {
+  if (!text) return;
+  if (!HAS_SUB.test(text)) {
+    drawFloatingLabel(ctx, text, x, y, canvasW, canvasH, fontSize, makeFont);
+    return;
+  }
+  const size = shrinkRichToWidth(ctx, [text], fontSize, canvasW - EDGE * 2, makeFont);
+  const at = nudgeRichInside(ctx, text, x, y, canvasW, canvasH, size, makeFont);
+  fillRich(ctx, text, at.x, at.y, size, makeFont);
+}
+
+// src/core/graphs/EconPlane.ts
+var ARROW_EXT = 26;
+var AXIS_W = 2.5;
+var LINE_W = 3;
+var GUIDE_W = 1.5;
+var ARROW_W = 2.5;
+var DOT_R = 6;
+var HEAD_LEN = 14;
+var HEAD_HALF = 6;
+var LABEL_GAP = 13;
+var NAME_LINE_H = 1.15;
+var DASH_PATTERN = {
+  dashed: [7, 5],
+  dotted: [1.5, 4]
+};
+var THICK_DASH = [12, 8];
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function formatTick3(v) {
+  const s = Number.isInteger(v) ? String(v) : v.toFixed(1);
+  return s.startsWith("-") ? "\u2212" + s.slice(1) : s;
+}
+function tickText(axis, i) {
+  const given = Array.isArray(axis.tickLabels) ? axis.tickLabels[i] : void 0;
+  return typeof given === "string" && given !== "" ? given : formatTick3(axis.ticks[i]);
+}
+function splitLines(text) {
+  return text ? text.split(/\\n|\n/) : [""];
+}
+function span(axis) {
+  const d = axis.max - axis.min;
+  return Number.isFinite(d) && Math.abs(d) > 1e-9 ? d : 1;
+}
+function seriesOf(data) {
+  return Array.isArray(data.series) ? data.series.filter((s) => s && Array.isArray(s.points)) : [];
+}
+function drawOrder(series) {
+  return series.length > 1 ? [...series].reverse() : series;
+}
+function drawSeriesMarker(ctx, s, cx, cy) {
+  ctx.beginPath();
+  if (s.marker === "square") ctx.rect(cx - DOT_R, cy - DOT_R, DOT_R * 2, DOT_R * 2);
+  else ctx.arc(cx, cy, DOT_R, 0, Math.PI * 2);
+  ctx.fillStyle = s.hollow ? "#fff" : "#000";
+  ctx.fill();
+  if (s.hollow) {
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = 2;
+    ctx.setLineDash([]);
+    ctx.stroke();
+  }
+}
+function anchorOf(pos, gap) {
+  const d = gap * 0.75;
+  switch (pos) {
+    case "left":
+      return { dx: -gap, dy: 0, align: "right", baseline: "middle" };
+    case "top":
+      return { dx: 0, dy: -gap, align: "center", baseline: "bottom" };
+    case "bottom":
+      return { dx: 0, dy: gap, align: "center", baseline: "top" };
+    case "top-left":
+      return { dx: -d, dy: -d, align: "right", baseline: "bottom" };
+    case "top-right":
+      return { dx: d, dy: -d, align: "left", baseline: "bottom" };
+    case "bottom-left":
+      return { dx: -d, dy: d, align: "right", baseline: "top" };
+    case "bottom-right":
+      return { dx: d, dy: d, align: "left", baseline: "top" };
+    default:
+      return { dx: gap, dy: 0, align: "left", baseline: "middle" };
+  }
+}
+function drawArrowHead(ctx, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.hypot(dx, dy);
+  if (!(len > 0)) return;
+  const ux = dx / len;
+  const uy = dy / len;
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - ux * HEAD_LEN - uy * HEAD_HALF, y2 - uy * HEAD_LEN + ux * HEAD_HALF);
+  ctx.lineTo(x2 - ux * HEAD_LEN + uy * HEAD_HALF, y2 - uy * HEAD_LEN - ux * HEAD_HALF);
+  ctx.closePath();
+  ctx.fill();
+}
+function drawBreakMark(ctx, x, y, vertical) {
+  const half = 8;
+  const gap = 7;
+  ctx.save();
+  ctx.translate(x, y);
+  if (vertical) ctx.rotate(-Math.PI / 2);
+  ctx.fillStyle = "#fff";
+  ctx.fillRect(-half - 2, -gap, (half + 2) * 2, gap * 2);
+  ctx.strokeStyle = "#000";
+  ctx.lineWidth = 1.6;
+  for (const dy of [-gap * 0.5, gap * 0.5]) {
+    ctx.beginPath();
+    ctx.moveTo(-half, dy + 2.5);
+    ctx.quadraticCurveTo(-half / 2, dy - 4.5, 0, dy);
+    ctx.quadraticCurveTo(half / 2, dy + 4.5, half, dy - 2.5);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function renderEconPlane(ctx, w, h, data, options) {
+  clearCanvas(ctx, w, h);
+  const fs = options.fontSize;
+  const four = data.quadrants === "all";
+  const nameFont = (size) => getFont(size, options);
+  const tickFont = getFont(fs.tick, options);
+  const series = seriesOf(data);
+  ctx.font = tickFont;
+  const yTickW = data.yAxis.ticks.length > 0 ? Math.max(...data.yAxis.ticks.map((_, i) => richWidth(ctx, tickText(data.yAxis, i), fs.tick, nameFont))) : 0;
+  ctx.font = nameFont(fs.axisLabel);
+  const yNameLines = splitLines(data.yAxis.label);
+  const xNameW = data.xAxis.label ? richWidth(ctx, data.xAxis.label, fs.axisLabel, nameFont) : 0;
+  const yNameW = data.yAxis.label ? Math.max(...yNameLines.map((l) => l ? richWidth(ctx, l, fs.axisLabel, nameFont) : 0)) : 0;
+  const lineLabelW = data.lines.length > 0 ? Math.max(...data.lines.map((l) => l.label ? richWidth(ctx, l.label, fs.axisLabel, nameFont) : 0)) : 0;
+  const notes = options.footnotes.filter((f) => f.trim()).length;
+  const inlineSource = !!options.sourceInline && !!options.source && !options.sourceLeft && notes > 0;
+  const hasSourceLine = (!!options.source || !!options.sourceLeft) && !inlineSource;
+  const bottomText = (hasSourceLine ? fs.dataLabel + 6 : 0) + notes * (fs.dataLabel * 0.9 + 6) + 12;
+  const yNameExtra = (yNameLines.length - 1) * fs.axisLabel * NAME_LINE_H;
+  const padding = {
+    top: (options.title ? fs.title + 40 : 18) + fs.axisLabel + yNameExtra + 10 + ARROW_EXT,
+    // 세로축 이름은 축 **왼쪽 위**에 오른쪽 맞춤으로 선다(네 사분면이면 가운데).
+    // 자리가 모자라면 글꼴을 줄이고 밀어 넣지만, 흔한 길이는 여기서 비워 둔다.
+    // 34% 를 넘겨 비우지는 않는다 — 이름 하나 때문에 그림이 사라지면 안 된다.
+    left: four ? Math.max(46, ARROW_EXT + 20) : Math.max(46, yTickW + 14, Math.min(yNameW + 8, w * 0.34)),
+    right: Math.min(
+      w * 0.45,
+      Math.max(56, lineLabelW + 16, ARROW_EXT + 12 + xNameW + 6)
+    ),
+    bottom: fs.tick + 24 + bottomText
+  };
+  const plotX = padding.left;
+  const plotY = padding.top;
+  const plotW = Math.max(40, w - padding.left - padding.right);
+  const plotH = Math.max(40, h - padding.top - padding.bottom);
+  const toX = (v) => plotX + (v - data.xAxis.min) / span(data.xAxis) * plotW;
+  const toY = (v) => plotY + plotH - (v - data.yAxis.min) / span(data.yAxis) * plotH;
+  const axX = four ? clamp(toX(0), plotX, plotX + plotW) : plotX;
+  const axY = four ? clamp(toY(0), plotY, plotY + plotH) : plotY + plotH;
+  const dash = DASH_PATTERN[data.dash] ?? DASH_PATTERN.dashed;
+  if (data.grid) {
+    const xEnd = data.xAxis.ticks.length > 0 ? toX(Math.max(...data.xAxis.ticks)) : plotX + plotW;
+    const yEnd = data.yAxis.ticks.length > 0 ? toY(Math.max(...data.yAxis.ticks)) : plotY;
+    ctx.save();
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = GUIDE_W;
+    ctx.setLineDash(dash);
+    for (const v of data.xAxis.ticks) {
+      if (v === 0) continue;
+      const x = toX(v);
+      ctx.beginPath();
+      ctx.moveTo(x, axY);
+      ctx.lineTo(x, yEnd);
+      ctx.stroke();
+    }
+    for (const v of data.yAxis.ticks) {
+      if (v === 0) continue;
+      const y = toY(v);
+      ctx.beginPath();
+      ctx.moveTo(axX, y);
+      ctx.lineTo(xEnd, y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.strokeStyle = "#000";
+  ctx.lineWidth = GUIDE_W;
+  ctx.setLineDash(dash);
+  for (const p of data.points) {
+    if (p.guide === "none") continue;
+    const px = toX(p.x);
+    const py = toY(p.y);
+    const cross = p.guide === "cross";
+    if (cross || p.guide === "to-x" || p.guide === "both") {
+      ctx.beginPath();
+      ctx.moveTo(px, cross ? plotY : py);
+      ctx.lineTo(px, cross ? plotY + plotH : axY);
+      ctx.stroke();
+    }
+    if (cross || p.guide === "to-y" || p.guide === "both") {
+      ctx.beginPath();
+      ctx.moveTo(cross ? plotX : px, py);
+      ctx.lineTo(cross ? plotX + plotW : axX, py);
+      ctx.stroke();
+    }
+  }
+  if (data.seriesGuides && series.length > 0) {
+    const highest = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      for (const p of s.points) {
+        const prev = highest.get(p.x);
+        if (prev == null || p.y > prev) highest.set(p.x, p.y);
+      }
+    }
+    for (const [x, y] of highest) {
+      ctx.beginPath();
+      ctx.moveTo(toX(x), toY(y));
+      ctx.lineTo(toX(x), axY);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.strokeStyle = "#000";
+  ctx.fillStyle = "#000";
+  ctx.lineWidth = AXIS_W;
+  ctx.lineCap = "butt";
+  const xLeft = four ? plotX - ARROW_EXT : axX;
+  const xRight = plotX + plotW + ARROW_EXT;
+  ctx.beginPath();
+  ctx.moveTo(xLeft, axY);
+  ctx.lineTo(xRight, axY);
+  ctx.stroke();
+  drawArrowHead(ctx, xLeft, axY, xRight, axY);
+  if (four) drawArrowHead(ctx, xRight, axY, xLeft, axY);
+  const yBottom = four ? plotY + plotH + ARROW_EXT : axY;
+  const yTop = plotY - ARROW_EXT;
+  ctx.beginPath();
+  ctx.moveTo(axX, yBottom);
+  ctx.lineTo(axX, yTop);
+  ctx.stroke();
+  drawArrowHead(ctx, axX, yBottom, axX, yTop);
+  if (four) drawArrowHead(ctx, axX, yTop, axX, yBottom);
+  if (data.xAxis.broken) {
+    const first = data.xAxis.ticks.find((v) => v !== 0);
+    drawBreakMark(ctx, first == null ? axX + plotW * 0.12 : (axX + toX(first)) / 2, axY, false);
+  }
+  if (data.yAxis.broken) {
+    const first = data.yAxis.ticks.find((v) => v !== 0);
+    drawBreakMark(ctx, axX, first == null ? axY - plotH * 0.12 : (axY + toY(first)) / 2, true);
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.strokeStyle = "#000";
+  ctx.lineWidth = LINE_W;
+  for (const line2 of data.lines) {
+    ctx.lineCap = line2.dashed ? "butt" : "round";
+    ctx.setLineDash(line2.dashed ? THICK_DASH : []);
+    ctx.beginPath();
+    ctx.moveTo(toX(line2.from.x), toY(line2.from.y));
+    ctx.lineTo(toX(line2.to.x), toY(line2.to.y));
+    ctx.stroke();
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.strokeStyle = "#000";
+  ctx.lineWidth = LINE_W;
+  for (const s of drawOrder(series)) {
+    if (s.points.length < 2) continue;
+    ctx.lineCap = s.dashed ? "butt" : "round";
+    ctx.setLineDash(s.dashed ? THICK_DASH : []);
+    ctx.beginPath();
+    s.points.forEach((p, i) => {
+      if (i === 0) ctx.moveTo(toX(p.x), toY(p.y));
+      else ctx.lineTo(toX(p.x), toY(p.y));
+    });
+    ctx.stroke();
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.fillStyle = "#000";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+  for (const line2 of data.lines) {
+    if (!line2.label) continue;
+    const end = line2.labelAt === "from" ? line2.from : line2.to;
+    const lx = toX(end.x) + 12 + (line2.labelDx ?? 0);
+    const raw = toY(end.y) + (line2.labelDy ?? 0);
+    const ly = Math.min(raw, axY - 6 - fs.axisLabel * 0.5);
+    drawFloatingRich(ctx, line2.label, lx, ly, w, h, fs.axisLabel, nameFont);
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.strokeStyle = "#000";
+  ctx.fillStyle = "#000";
+  ctx.lineWidth = ARROW_W;
+  for (const a of data.arrows) {
+    const x1 = toX(a.from.x);
+    const y1 = toY(a.from.y);
+    const x2 = toX(a.to.x);
+    const y2 = toY(a.to.y);
+    const len = Math.hypot(x2 - x1, y2 - y1);
+    if (!(len > 0)) continue;
+    const ux = (x2 - x1) / len;
+    const uy = (y2 - y1) / len;
+    const ox = -uy * a.offset;
+    const oy = ux * a.offset;
+    const cut = Math.min(a.shorten, len * 0.4);
+    const sx = x1 + ux * cut + ox;
+    const sy = y1 + uy * cut + oy;
+    const ex = x2 - ux * cut + ox;
+    const ey = y2 - uy * cut + oy;
+    ctx.beginPath();
+    ctx.moveTo(sx, sy);
+    ctx.lineTo(ex, ey);
+    ctx.stroke();
+    drawArrowHead(ctx, sx, sy, ex, ey);
+    if (a.label) {
+      const at = anchorOf(a.labelPos, LABEL_GAP + 4);
+      ctx.textAlign = at.align;
+      ctx.textBaseline = at.baseline;
+      drawFloatingRich(ctx, a.label, (sx + ex) / 2 + at.dx, (sy + ey) / 2 + at.dy, w, h, fs.axisLabel, nameFont);
+    }
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.fillStyle = "#000";
+  for (const p of data.points) {
+    const px = toX(p.x);
+    const py = toY(p.y);
+    if (p.dot) {
+      ctx.beginPath();
+      ctx.arc(px, py, DOT_R, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    if (!p.label) continue;
+    const at = anchorOf(p.labelPos, DOT_R + LABEL_GAP);
+    ctx.textAlign = at.align;
+    ctx.textBaseline = at.baseline;
+    drawFloatingRich(ctx, p.label, px + at.dx, py + at.dy, w, h, fs.axisLabel, nameFont);
+  }
+  ctx.restore();
+  ctx.save();
+  for (const s of drawOrder(series)) {
+    for (const p of s.points) drawSeriesMarker(ctx, s, toX(p.x), toY(p.y));
+  }
+  ctx.restore();
+  const tickInk = (text, x, y) => {
+    if (four) {
+      const tw = richWidth(ctx, text, fs.tick, nameFont);
+      const left = ctx.textAlign === "right" ? tw : ctx.textAlign === "center" ? tw / 2 : 0;
+      const up = ctx.textBaseline === "top" ? 0 : fs.tick * 0.5;
+      const rx = clamp(x - left - 3, 0, w);
+      const ry = clamp(y - up - 2, 0, h);
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(rx, ry, Math.min(tw + 6, w - rx), Math.min(fs.tick + 4, h - ry));
+      ctx.fillStyle = "#000";
+    }
+    fillRich(ctx, text, x, y, fs.tick, nameFont);
+  };
+  ctx.save();
+  ctx.fillStyle = "#000";
+  ctx.font = tickFont;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+  data.xAxis.ticks.forEach((v, i) => {
+    if (v === 0) return;
+    const text = tickText(data.xAxis, i);
+    const at = nudgeRichInside(ctx, text, toX(v), axY + 10, w, h, fs.tick, nameFont);
+    tickInk(text, at.x, at.y);
+  });
+  ctx.textAlign = four ? "left" : "right";
+  ctx.textBaseline = "middle";
+  data.yAxis.ticks.forEach((v, i) => {
+    if (v === 0) return;
+    const text = tickText(data.yAxis, i);
+    const at = nudgeRichInside(ctx, text, axX + (four ? 10 : -10), toY(v), w, h, fs.tick, nameFont);
+    tickInk(text, at.x, at.y);
+  });
+  ctx.textAlign = four ? "left" : "center";
+  ctx.textBaseline = "top";
+  const zero = nudgeInside(ctx, "0", axX + (four ? 8 : 0), axY + 10, w, h);
+  tickInk("0", zero.x, zero.y);
+  ctx.restore();
+  ctx.save();
+  ctx.fillStyle = "#000";
+  if (data.xAxis.label) {
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    drawFloatingRich(ctx, data.xAxis.label, xRight + 10, axY + fs.tick * 0.6, w, h, fs.axisLabel, nameFont);
+  }
+  if (data.yAxis.label) {
+    ctx.textAlign = four ? "center" : "right";
+    ctx.textBaseline = "bottom";
+    const baseY = yTop - (four ? 8 : -4);
+    if (yNameLines.length === 1) {
+      drawFloatingRich(ctx, data.yAxis.label, axX + (four ? 0 : -8), baseY, w, h, fs.axisLabel, nameFont);
+    } else {
+      const lh = fs.axisLabel * NAME_LINE_H;
+      const cx = four ? axX : axX - 8 - yNameW / 2;
+      ctx.textAlign = "center";
+      yNameLines.forEach((lineText, i) => {
+        const ly = baseY - (yNameLines.length - 1 - i) * lh;
+        drawFloatingRich(ctx, lineText, cx, ly, w, h, fs.axisLabel, nameFont);
+      });
+    }
+  }
+  ctx.restore();
+  if (data.legend && series.length > 0) {
+    const items = series.map((s) => ({
+      type: "line",
+      fillStyle: "#000",
+      strokeStyle: "#000",
+      label: s.label,
+      dash: s.dashed ? THICK_DASH : [],
+      lineWidth: 2.5,
+      marker: s.marker,
+      hollow: s.hollow
+    }));
+    drawInsideLegend({
+      ctx,
+      items,
+      corner: data.legend,
+      plotX,
+      plotY,
+      plotW,
+      plotH,
+      canvasW: w,
+      canvasH: h,
+      fontSize: fs.axisLabel * 0.8,
+      font: nameFont(fs.axisLabel * 0.8),
+      // 기호가 상자에 덮이지 않게 꼭짓점 둘레를 피할 자리로 넘긴다
+      avoid: series.flatMap((s) => s.points.map((p) => ({
+        x0: toX(p.x) - DOT_R,
+        y0: toY(p.y) - DOT_R,
+        x1: toX(p.x) + DOT_R,
+        y1: toY(p.y) + DOT_R
+      })))
+    });
+  }
+  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: fs.title, fonts: options, canvasWidth: w });
+  drawSourceAndFootnote({
+    ctx,
+    plotX,
+    plotW,
+    height: h,
+    source: options.source,
+    sourceLeft: options.sourceLeft,
+    sourceInline: options.sourceInline,
+    footnotes: options.footnotes,
+    fontSize: fs.dataLabel,
+    fonts: options,
+    canvasWidth: w
+  });
+}
+
 // src/core/graphs/TreemapGraph.ts
 var PAD_RATIO3 = 0.4;
 var MIN_LABEL_W = 34;
@@ -2491,29 +3125,30 @@ function renderTreemapGraph(ctx, w, h, data, options) {
   ctx.fillStyle = "#000";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.font = getFont(labelSize, options.fontFamily, options.customFont);
+  ctx.font = getFont(labelSize, options);
   rects.forEach((r, i) => {
     if (shouldOmitLabel(r, minLabelW, labelSize)) return;
     const avail = r.w - pad * 2;
-    ctx.font = getFont(labelSize, options.fontFamily, options.customFont);
+    ctx.font = getFont(labelSize, options);
     const layout = pickLabelLayout(ctx, data.cells[i].label, avail, r.h, labelSize);
     if (shouldOmitLayout(layout)) return;
     const drawSize = resolveDrawSize(labelSize, layout);
     if (drawSize !== labelSize) {
-      ctx.font = getFont(drawSize, options.fontFamily, options.customFont);
+      ctx.font = getFont(drawSize, options);
     }
     const startY = r.y + r.h / 2 - (layout.lines.length - 1) * drawSize * 1.2 / 2;
     layout.lines.forEach((line2, k) => {
       ctx.fillText(line2, r.x + r.w / 2, startY + k * drawSize * 1.2, avail);
     });
     if (drawSize !== labelSize) {
-      ctx.font = getFont(labelSize, options.fontFamily, options.customFont);
+      ctx.font = getFont(labelSize, options);
     }
   });
   ctx.lineWidth = 2;
   ctx.strokeRect(frame.x, frame.y, frame.w, frame.h);
   drawTitle({
     ctx,
+    fonts: options,
     plotX: frame.x,
     plotW: frame.w,
     title: options.title,
@@ -2522,6 +3157,7 @@ function renderTreemapGraph(ctx, w, h, data, options) {
   });
   drawSourceAndFootnote({
     ctx,
+    fonts: options,
     plotX: frame.x,
     plotW: frame.w,
     height: h,
@@ -2547,12 +3183,13 @@ function renderClimateGraph(ctx, w, h, data, options) {
     options.legendLabel1 || data.precipLabel,
     options.legendLabel2 || data.tempLabel
   ];
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(
     ctx,
     legendLabels,
     options.fontSize.dataLabel * 0.85 + 5,
     w - 130 - (130 + legendW),
+    options,
     ["rect", data.monthInterval === 12 ? "line" : "circle"]
   ) : 0;
   const padding = {
@@ -2585,8 +3222,6 @@ function renderClimateGraph(ctx, w, h, data, options) {
     step: data.precipRange.step || Math.max(1, Math.round((data.precipRange.max - data.precipRange.min) / 6))
   };
   if (precipAxis.min < 0) precipAxis.min = 0;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const indices = INTERVAL_INDICES[data.monthInterval] ?? INTERVAL_INDICES[12];
   drawYAxis({
     ctx,
@@ -2598,8 +3233,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
     step: tempAxis.step,
     label: data.tempLabel,
     side: "left",
-    fontFamily: font,
-    customFont,
+    fonts: options,
     tickFontSize: options.fontSize.tick,
     labelFontSize: options.fontSize.axisLabel,
     drawGrid: true
@@ -2614,8 +3248,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
     step: precipAxis.step,
     label: data.precipLabel,
     side: "right",
-    fontFamily: font,
-    customFont,
+    fonts: options,
     tickFontSize: options.fontSize.tick,
     labelFontSize: options.fontSize.axisLabel
   });
@@ -2627,8 +3260,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
       height: h,
       labels: MONTH_LABELS,
       indices,
-      fontFamily: font,
-      customFont,
+      fonts: options,
       tickFontSize: options.fontSize.tick,
       labelFontSize: options.fontSize.axisLabel
     });
@@ -2640,8 +3272,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
       width: w,
       height: h,
       labels: filteredLabels,
-      fontFamily: font,
-      customFont,
+      fonts: options,
       tickFontSize: options.fontSize.tick,
       labelFontSize: options.fontSize.axisLabel
     });
@@ -2666,7 +3297,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
   }
   if (options.showDataLabels) {
     ctx.fillStyle = "#000";
-    ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
     ctx.textAlign = "center";
     ctx.textBaseline = "bottom";
     for (let s = 0; s < indices.length; s++) {
@@ -2701,21 +3332,22 @@ function renderClimateGraph(ctx, w, h, data, options) {
     ctx.fill();
     if (options.showDataLabels) {
       ctx.fillStyle = "#000";
-      ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
       ctx.textAlign = "center";
       ctx.textBaseline = "bottom";
       ctx.fillText(String(data.months[i].temp), cx, y - 8);
     }
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   ctx.fillText("(\uC6D4)", plotX + plotW + 30, plotY + plotH + 12);
   if (showLegend) {
     drawLegend({
       ctx,
+      fonts: options,
       items: [
         { type: "rect", fillStyle: "#AAA", strokeStyle: "#666", label: legendLabels[0] },
         { type: data.monthInterval === 12 ? "line" : "circle", fillStyle: "#000", label: legendLabels[1] }
@@ -2731,7 +3363,7 @@ function renderClimateGraph(ctx, w, h, data, options) {
       rightGap: 80
     });
   }
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel });
 }
 
 // src/core/graphs/CubeGraph.ts
@@ -2783,8 +3415,6 @@ var EDGES = [
 ];
 function renderCubeGraph(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
-  const font = options.fontFamily;
-  const cf = options.customFont;
   const fs = options.fontSize;
   const topPad = options.title ? 100 : 60;
   let bottomPad = 40;
@@ -2801,8 +3431,7 @@ function renderCubeGraph(ctx, w, h, data, options) {
     availH,
     Math.min(availW * 0.5, availH * 0.55),
     fs,
-    font,
-    cf
+    options
   );
   const scale = fit.scale;
   const cubeCenter = project(0.5, 0.5, 0.5, 0, 0, scale);
@@ -2830,7 +3459,7 @@ function renderCubeGraph(ctx, w, h, data, options) {
     ctx.lineTo(v2[b][0], v2[b][1]);
     ctx.stroke();
   }
-  drawAxes(ctx, data, cx, cy, scale, w, h, font, cf, fs, fit.names, fit.nameSize);
+  drawAxes(ctx, data, cx, cy, scale, w, h, options, fs, fit.names, fit.nameSize);
   const cubeCenter2D = project(0.5, 0.5, 0.5, cx, cy, scale);
   for (const pt of data.points) {
     const [px, py] = project(pt.z, pt.y, pt.x, cx, cy, scale);
@@ -2845,7 +3474,7 @@ function renderCubeGraph(ctx, w, h, data, options) {
     autoDy = autoDy / len * 40;
     const dx = autoDx + pt.labelDx;
     const dy = autoDy + pt.labelDy;
-    ctx.font = getFont(fs.dataLabel + 10, font, cf, "bold");
+    ctx.font = getFont(fs.dataLabel + 10, options, "bold");
     ctx.textAlign = dx >= 0 ? "left" : "right";
     ctx.textBaseline = "middle";
     const anchor = nudgeInside(ctx, pt.label, px + dx + (dx >= 0 ? 4 : -4), py + dy, w, h);
@@ -2866,9 +3495,10 @@ function renderCubeGraph(ctx, w, h, data, options) {
   const plotX = cubeLeft;
   const plotW = cubeRight - cubeLeft;
   if (options.title) {
+    const titleFont = sansFont(options);
     const yAxisTop = project(0, 1.25, 0, cx, cy, scale);
     ctx.fillStyle = "#000";
-    ctx.font = `bold ${fs.title}px 'Noto Sans KR', sans-serif`;
+    ctx.font = `bold ${fs.title}px ${titleFont}`;
     ctx.textAlign = "center";
     ctx.textBaseline = "bottom";
     drawFloatingLabel(
@@ -2879,13 +3509,13 @@ function renderCubeGraph(ctx, w, h, data, options) {
       w,
       h,
       fs.title,
-      (size) => `bold ${size}px 'Noto Sans KR', sans-serif`
+      (size) => `bold ${size}px ${titleFont}`
     );
   }
   const zAxisEnd = project(1.25, 0, 0, cx, cy, scale);
   const zHighRef = project(1, 0, 0, cx, cy, scale);
   const sourceY = Math.max(zAxisEnd[1] + 20 + fs.axisLabel, zHighRef[1] + 10 + fs.axisLabel * 0.9) + 47;
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: sourceY, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: sourceY, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel });
 }
 function drawArrow(ctx, x1, y1, x2, y2) {
   const headLen = 10;
@@ -2932,11 +3562,11 @@ function centerAt(w, topPad, availH, s) {
   const c = project(0.5, 0.5, 0.5, 0, 0, s);
   return [w / 2 - c[0], topPad + availH / 2 - c[1]];
 }
-function fitCubeScale(ctx, data, w, h, topPad, availH, maxScale, fs, font, cf) {
+function fitCubeScale(ctx, data, w, h, topPad, availH, maxScale, fs, options) {
   ctx.save();
   let nameSize = fs.axisLabel;
-  const makeNameFont = (size) => getFont(size, font, cf, "bold");
-  const dirFont = getFont(fs.axisLabel * 0.9, font, cf, "normal");
+  const makeNameFont = (size) => getFont(size, options, "bold");
+  const dirFont = getFont(fs.axisLabel * 0.9, options, "normal");
   let names = { x: [data.xAxis.name], y: [data.yAxis.name], z: [data.zAxis.name] };
   const fits = (s) => {
     const [cx, cy] = centerAt(w, topPad, availH, s);
@@ -2976,7 +3606,7 @@ function fitCubeScale(ctx, data, w, h, topPad, availH, maxScale, fs, font, cf) {
   ctx.restore();
   return { scale, names, nameSize };
 }
-function drawAxes(ctx, data, cx, cy, scale, w, h, font, cf, fs, names, nameSize) {
+function drawAxes(ctx, data, cx, cy, scale, w, h, options, fs, names, nameSize) {
   const ext = 1.25;
   ctx.strokeStyle = "#000";
   ctx.fillStyle = "#000";
@@ -2990,8 +3620,8 @@ function drawAxes(ctx, data, cx, cy, scale, w, h, font, cf, fs, names, nameSize)
   const zStart = project(0, 0, 1, cx, cy, scale);
   const zEnd = project(0, 0, ext, cx, cy, scale);
   drawArrow(ctx, zStart[0], zStart[1], zEnd[0], zEnd[1]);
-  const nameFont = getFont(nameSize, font, cf, "bold");
-  const dirFont = getFont(fs.axisLabel * 0.9, font, cf, "normal");
+  const nameFont = getFont(nameSize, options, "bold");
+  const dirFont = getFont(fs.axisLabel * 0.9, options, "normal");
   ctx.fillStyle = "#000";
   for (const t of axisTexts(data, cx, cy, scale, names)) {
     if (t.lines.every((l) => !l)) continue;
@@ -3019,11 +3649,11 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
     options.legendLabel1 || data.precipLabel,
     options.legendLabel2 || data.tempLabel
   ];
-  const legendW = showLegend && legendPos === "right" && !data.insideLegend ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" && !data.insideLegend ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   let nameW = 0;
   if (data.tempAxisName || data.precipAxisName) {
     ctx.save();
-    ctx.font = getFont(options.fontSize.axisLabel, options.fontFamily, options.customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
     nameW = ctx.measureText("\uAC00").width + 12;
     ctx.restore();
   }
@@ -3034,6 +3664,7 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
     legendLabels,
     options.fontSize.dataLabel * 0.85 + 5,
     w - padLeft - padRight,
+    options,
     ["rect", data.monthInterval === 12 ? "line" : "circle"]
   ) : 0;
   const padding = {
@@ -3053,8 +3684,6 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
   const plotY = padding.top;
   const plotW = w - padding.left - padding.right;
   const plotH = h - padding.top - padding.bottom;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const indices = INTERVAL_INDICES2[data.monthInterval] ?? INTERVAL_INDICES2[12];
   const tempDevs = data.months.map((m, i) => m.temp - data.baseMonths[i].temp);
   const precipDevs = data.months.map((m, i) => m.precip - data.baseMonths[i].precip);
@@ -3077,8 +3706,8 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
   if (tempAxis.step === 0) {
     tempAxis.step = Math.max(0.5, Math.round((tempAxis.max - tempAxis.min) / 6 * 10) / 10);
   }
-  const tempTickW = drawDeviationYAxis(ctx, padding, w, h, tempAxis, "left", data.tempLabel, font, customFont, options.fontSize);
-  const precipTickW = drawDeviationYAxis(ctx, padding, w, h, precipAxis, "right", data.precipLabel, font, customFont, options.fontSize);
+  const tempTickW = drawDeviationYAxis(ctx, padding, w, h, tempAxis, "left", data.tempLabel, options, options.fontSize);
+  const precipTickW = drawDeviationYAxis(ctx, padding, w, h, precipAxis, "right", data.precipLabel, options, options.fontSize);
   const totalSlots = indices.length;
   const slotW = plotW / totalSlots;
   ctx.strokeStyle = "#000";
@@ -3094,7 +3723,7 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
     ctx.stroke();
   }
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   for (let s = 0; s < totalSlots; s++) {
@@ -3164,7 +3793,7 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
     inkRects.push({ x0: cx - 6, y0: y - 6, x1: cx + 6, y1: y + 6 });
   }
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   ctx.fillText("(\uC6D4)", plotX + plotW + 30, plotY + plotH + 12);
@@ -3193,12 +3822,13 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
       canvasW: w,
       canvasH: h,
       fontSize: options.fontSize.dataLabel * 0.9,
-      font: getFont(options.fontSize.dataLabel * 0.9, font, customFont, "bold"),
+      font: getFont(options.fontSize.dataLabel * 0.9, options, "bold"),
       avoid: inkRects
     });
   } else if (showLegend) {
     drawLegend({
       ctx,
+      fonts: options,
       items: [
         { type: "rect", fillStyle: "#888", strokeStyle: "#444", label: legendLabels[0] },
         { type: data.monthInterval === 12 ? "line" : "circle", fillStyle: "#000", label: legendLabels[1] }
@@ -3223,8 +3853,7 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
       plotH,
       h,
       options.fontSize.axisLabel,
-      font,
-      customFont
+      options
     );
   }
   if (data.precipAxisName) {
@@ -3236,14 +3865,13 @@ function renderDeviationAGraph(ctx, w, h, data, options) {
       plotH,
       h,
       options.fontSize.axisLabel,
-      font,
-      customFont
+      options
     );
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
-function drawDeviationYAxis(ctx, padding, width, height, axis, side, label, fontFamily, customFont, fontSize) {
+function drawDeviationYAxis(ctx, padding, width, height, axis, side, label, fonts, fontSize) {
   const plotX = padding.left;
   const plotY = padding.top;
   const plotW = width - padding.left - padding.right;
@@ -3256,7 +3884,7 @@ function drawDeviationYAxis(ctx, padding, width, height, axis, side, label, font
   ctx.lineTo(x, plotY + plotH);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(fontSize.tick, fontFamily, customFont, "bold");
+  ctx.font = getFont(fontSize.tick, fonts, "bold");
   ctx.textBaseline = "middle";
   ctx.textAlign = side === "left" ? "right" : "left";
   let maxTickW = 0;
@@ -3281,7 +3909,7 @@ function drawDeviationYAxis(ctx, padding, width, height, axis, side, label, font
   }
   if (label) {
     ctx.save();
-    const makeFont = (size) => getFont(size, fontFamily, customFont, "bold");
+    const makeFont = (size) => getFont(size, fonts, "bold");
     ctx.fillStyle = "#000";
     ctx.textBaseline = "bottom";
     ctx.textAlign = side === "left" ? "right" : "left";
@@ -3293,7 +3921,7 @@ function drawDeviationYAxis(ctx, padding, width, height, axis, side, label, font
   }
   return maxTickW;
 }
-function drawVerticalAxisName(ctx, name, cx, plotY, plotH, canvasH, fontSize, fontFamily, customFont) {
+function drawVerticalAxisName(ctx, name, cx, plotY, plotH, canvasH, fontSize, fonts) {
   const chars = [...name].filter((c) => c.trim() !== "");
   if (chars.length === 0) return;
   const stack = (size2) => (chars.length - 1) * size2 * 1.15 + size2;
@@ -3303,7 +3931,7 @@ function drawVerticalAxisName(ctx, name, cx, plotY, plotH, canvasH, fontSize, fo
   }
   if (stack(size) > canvasH - EDGE * 2) size = (canvasH - EDGE * 2) / stack(1);
   ctx.save();
-  ctx.font = getFont(size, fontFamily, customFont, "bold");
+  ctx.font = getFont(size, fonts, "bold");
   ctx.fillStyle = "#000";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
@@ -3331,12 +3959,13 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
     options.legendLabel1 || data.precipDiffLabel,
     options.legendLabel2 || data.tempDiffLabel
   ];
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(
     ctx,
     legendLabels,
     options.fontSize.dataLabel * 0.85 + 5,
     w - 130 - (130 + legendW),
+    options,
     ["rect", "circle"]
   ) : 0;
   const padding = {
@@ -3356,8 +3985,6 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
   const plotY = padding.top;
   const plotW = w - padding.left - padding.right;
   const plotH = h - padding.top - padding.bottom;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const regions = data.regions;
   const n = regions.length;
   const precipDiffs = regions.map((r) => r.precip - data.basePrecip);
@@ -3378,8 +4005,8 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
     tempAxis.min = -tempAbs;
     tempAxis.max = tempAbs;
   }
-  drawDevBYAxis(ctx, padding, w, h, tempAxis, "left", data.tempUnit, font, customFont, options.fontSize);
-  drawDevBYAxis(ctx, padding, w, h, precipAxis, "right", data.precipUnit, font, customFont, options.fontSize);
+  drawDevBYAxis(ctx, padding, w, h, tempAxis, "left", data.tempUnit, options, options.fontSize);
+  drawDevBYAxis(ctx, padding, w, h, precipAxis, "right", data.precipUnit, options, options.fontSize);
   ctx.strokeStyle = "#000";
   ctx.lineWidth = 2;
   ctx.beginPath();
@@ -3396,10 +4023,10 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
   const slotW = plotW / n;
   const barWidth = Math.min(slotW * 0.5, 80);
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick * 1.2, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick * 1.2, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
-  const regionFont = (size) => getFont(size, font, customFont, "bold");
+  const regionFont = (size) => getFont(size, options, "bold");
   for (let i = 0; i < n; i++) {
     const cx = plotX + slotW * i + slotW / 2;
     drawFloatingLabel(
@@ -3435,7 +4062,7 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
     ctx.fill();
   }
   if (options.showDataLabels) {
-    ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
     ctx.textAlign = "center";
     for (let i = 0; i < n; i++) {
       const cx = plotX + slotW * i + slotW / 2;
@@ -3453,6 +4080,7 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
   if (showLegend) {
     drawLegend({
       ctx,
+      fonts: options,
       items: [
         { type: "rect", fillStyle: "#888", strokeStyle: "#444", label: legendLabels[0] },
         { type: "circle", fillStyle: "#000", label: legendLabels[1] }
@@ -3468,10 +4096,10 @@ function renderDeviationBGraph(ctx, w, h, data, options) {
       rightGap: 80
     });
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel });
 }
-function drawDevBYAxis(ctx, padding, width, height, axis, side, label, fontFamily, customFont, fontSize) {
+function drawDevBYAxis(ctx, padding, width, height, axis, side, label, fonts, fontSize) {
   const plotX = padding.left;
   const plotY = padding.top;
   const plotW = width - padding.left - padding.right;
@@ -3484,7 +4112,7 @@ function drawDevBYAxis(ctx, padding, width, height, axis, side, label, fontFamil
   ctx.lineTo(x, plotY + plotH);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(fontSize.tick, fontFamily, customFont, "bold");
+  ctx.font = getFont(fontSize.tick, fonts, "bold");
   ctx.textBaseline = "middle";
   ctx.textAlign = side === "left" ? "right" : "left";
   const tickCount = Math.round((axis.max - axis.min) / axis.step);
@@ -3506,7 +4134,7 @@ function drawDevBYAxis(ctx, padding, width, height, axis, side, label, fontFamil
     ctx.fillText(valStr, tx, y);
   }
   ctx.save();
-  ctx.font = getFont(fontSize.axisLabel, fontFamily, customFont, "bold");
+  ctx.font = getFont(fontSize.axisLabel, fonts, "bold");
   ctx.fillStyle = "#000";
   ctx.textBaseline = "bottom";
   const labelX = side === "left" ? x - 12 : x + 12;
@@ -3572,19 +4200,18 @@ function drawMarkerLegendIcon(ctx, type, cx, cy) {
 }
 function renderHythergraph(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
-  const font = options.fontFamily;
-  const cf = options.customFont;
   const fs = options.fontSize;
   const showLegend = options.showLegend && data.series.length > 0;
   const legendPos = options.legendPosition;
   const legendLabels = data.series.map((s) => s.label);
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, fs.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, fs.dataLabel * 0.85 + 5, options) : 0;
   const legendReserve = showLegend && legendPos === "bottom" ? 65 + layoutBottomLegend(
     ctx,
     legendLabels,
     data.series.map(() => 36),
     fs.dataLabel * 0.85 + 5,
     w - 80 - (80 + legendW),
+    options,
     { iconGap: 8 }
   ).boxH + 2 : 0;
   const padding = {
@@ -3643,7 +4270,7 @@ function renderHythergraph(ctx, w, h, data, options) {
   ctx.lineTo(plotX + plotW, plotY + plotH);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(fs.tick, font, cf, "bold");
+  ctx.font = getFont(fs.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   for (let v = xMin; v <= xMax + xStep * 0.01; v += xStep) {
@@ -3655,7 +4282,7 @@ function renderHythergraph(ctx, w, h, data, options) {
     ctx.stroke();
     const isLast = v + xStep > xMax + xStep * 0.01;
     if (!(isLast && data.xUnit)) {
-      ctx.fillText(formatTick3(v), x, plotY + plotH + 10);
+      ctx.fillText(formatTick4(v), x, plotY + plotH + 10);
     }
   }
   ctx.textAlign = "right";
@@ -3669,12 +4296,12 @@ function renderHythergraph(ctx, w, h, data, options) {
     ctx.stroke();
     const isLast = v + yStep > yMax + yStep * 0.01;
     if (!(isLast && data.yUnit)) {
-      ctx.fillText(formatTick3(v), plotX - 10, y);
+      ctx.fillText(formatTick4(v), plotX - 10, y);
     }
   }
-  ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+  ctx.font = getFont(fs.axisLabel, options, "bold");
   ctx.fillStyle = "#000";
-  const unitFont = (size) => getFont(size, font, cf, "bold");
+  const unitFont = (size) => getFont(size, options, "bold");
   if (data.xUnit) {
     ctx.textAlign = "right";
     ctx.textBaseline = "top";
@@ -3716,7 +4343,7 @@ function renderHythergraph(ctx, w, h, data, options) {
         drawMarker3(ctx, marker, cx, cy, 5);
         {
           ctx.fillStyle = "#000";
-          ctx.font = getFont(fs.dataLabel, font, cf, "bold");
+          ctx.font = getFont(fs.dataLabel, options, "bold");
           ctx.textAlign = "left";
           ctx.textBaseline = "bottom";
           ctx.fillText(mLabels[i], cx + 9, cy - 5);
@@ -3726,9 +4353,9 @@ function renderHythergraph(ctx, w, h, data, options) {
   }
   if (showLegend) {
     const lfSize = fs.dataLabel * 0.85 + 5;
-    const LEGEND_FONT2 = "'Noto Sans KR', sans-serif";
+    const LEGEND_FONT = sansFont(options);
     ctx.save();
-    ctx.font = `bold ${lfSize}px ${LEGEND_FONT2}`;
+    ctx.font = `bold ${lfSize}px ${LEGEND_FONT}`;
     const iconW = 36;
     const iconGap = 8;
     const pad = 12;
@@ -3744,6 +4371,7 @@ function renderHythergraph(ctx, w, h, data, options) {
         data.series.map(() => iconW),
         lfSize,
         boxW,
+        options,
         { iconGap, padding: pad, spacing }
       );
       const boxH = layout.boxH;
@@ -3772,7 +4400,7 @@ function renderHythergraph(ctx, w, h, data, options) {
           ctx.stroke();
           ctx.setLineDash([]);
           drawMarkerLegendIcon(ctx, MARKERS[i % MARKERS.length], cx + iconW / 2, cy);
-          ctx.font = `bold ${layout.fontSize}px ${LEGEND_FONT2}`;
+          ctx.font = `bold ${layout.fontSize}px ${LEGEND_FONT}`;
           ctx.fillStyle = "#000";
           ctx.textAlign = "left";
           ctx.textBaseline = "middle";
@@ -3807,7 +4435,7 @@ function renderHythergraph(ctx, w, h, data, options) {
         ctx.stroke();
         ctx.setLineDash([]);
         drawMarkerLegendIcon(ctx, MARKERS[i % MARKERS.length], ix + iconW / 2, cy);
-        ctx.font = `bold ${lfSize}px ${LEGEND_FONT2}`;
+        ctx.font = `bold ${lfSize}px ${LEGEND_FONT}`;
         ctx.fillStyle = "#000";
         ctx.textAlign = "left";
         ctx.textBaseline = "middle";
@@ -3817,10 +4445,10 @@ function renderHythergraph(ctx, w, h, data, options) {
     }
     ctx.restore();
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
 }
-function formatTick3(v) {
+function formatTick4(v) {
   return Math.abs(v) < 1e-4 ? "0" : Number(v.toFixed(2)).toString();
 }
 
@@ -3851,12 +4479,13 @@ function renderPyramidGraph(ctx, w, h, data, options) {
     options.legendLabel1 || data.maleLabel,
     options.legendLabel2 || data.femaleLabel
   ];
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(
     ctx,
     legendLabels,
     options.fontSize.dataLabel * 0.85 + 5,
-    w - 60 - (80 + legendW)
+    w - 60 - (80 + legendW),
+    options
   ) : 0;
   const padding = {
     top: options.title ? 100 : 50,
@@ -3875,8 +4504,6 @@ function renderPyramidGraph(ctx, w, h, data, options) {
   const plotY = padding.top;
   const plotW = w - padding.left - padding.right;
   const plotH = h - padding.top - padding.bottom;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const displayAges = data.ages;
   const n = data.numericAgeAxis && displayAges.length > 0 ? displayAges.length : AGE_GROUPS.length;
   const isPercent = data.unit === "percent";
@@ -3921,7 +4548,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
   ctx.lineTo(plotX + plotW, plotY + plotH);
   ctx.stroke();
   ctx.save();
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   const tickStep = pickTickStep(maxVal, halfW, ctx.measureText(fmtTick(maxVal)).width);
   ctx.restore();
   for (let v = tickStep; v <= maxVal; v += tickStep) {
@@ -3958,7 +4585,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
   ctx.fillStyle = "#000";
   ctx.textBaseline = "middle";
   if (data.numericAgeAxis) {
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.textAlign = "right";
     const ageStep = 20;
     const topAge = n * 5;
@@ -3982,13 +4609,13 @@ function renderPyramidGraph(ctx, w, h, data, options) {
         w,
         h,
         options.fontSize.tick,
-        (size) => getFont(size, font, customFont, "bold")
+        (size) => getFont(size, options, "bold")
       );
-      ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.tick, options, "bold");
       ctx.textBaseline = "middle";
     }
   } else {
-    ctx.font = getFont(options.fontSize.tick * 0.75, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick * 0.75, options, "bold");
     for (let i = 0; i < n; i++) {
       const y = plotY + plotH - (i + 1) * barH + barH / 2;
       if (side === "center") {
@@ -4003,7 +4630,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       }
     }
   }
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.textBaseline = "top";
   ctx.fillStyle = "#000";
   const xTickValues = [];
@@ -4045,7 +4672,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       ctx.fillText(fmtTick(rv), rx, plotY + plotH + 10);
     }
   }
-  ctx.font = getFont(options.fontSize.axisLabel, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
   ctx.textBaseline = "bottom";
   ctx.fillStyle = "#000";
   ctx.textAlign = "center";
@@ -4053,7 +4680,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
   ctx.fillText(data.femaleLabel, centerX + halfW / 2, plotY - 16);
   ctx.save();
   if (data.axisLabelInline) {
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     const lastTickHalfW = ctx.measureText(fmtTick(maxVal)).width / 2;
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
@@ -4065,10 +4692,10 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       w,
       h,
       options.fontSize.tick,
-      (size) => getFont(size, font, customFont, "bold")
+      (size) => getFont(size, options, "bold")
     );
   } else {
-    ctx.font = getFont(options.fontSize.axisLabel * 0.85, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel * 0.85, options, "bold");
     const unitY = plotY + plotH + 10 + options.fontSize.tick + 22;
     ctx.textAlign = "left";
     drawFloatingLabel(
@@ -4079,12 +4706,12 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       w,
       h,
       options.fontSize.axisLabel * 0.85,
-      (size) => getFont(size, font, customFont, "bold")
+      (size) => getFont(size, options, "bold")
     );
   }
   ctx.restore();
   if (options.showDataLabels) {
-    ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
     ctx.fillStyle = "#000";
     for (let i = 0; i < n; i++) {
       const y = plotY + plotH - (i + 1) * barH + barH / 2;
@@ -4102,10 +4729,11 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       }
     }
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   if (showLegend) {
     drawLegend({
       ctx,
+      fonts: options,
       items: [
         { type: "rect", fillStyle: "#666", strokeStyle: "#444", label: legendLabels[0] },
         { type: "rect", fillStyle: "#BBB", strokeStyle: "#888", label: legendLabels[1] }
@@ -4120,7 +4748,7 @@ function renderPyramidGraph(ctx, w, h, data, options) {
       fontSize: options.fontSize.dataLabel * 0.85 + 5
     });
   }
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
 
 // src/core/graphs/RadarChart.ts
@@ -4134,15 +4762,13 @@ var LINE_STYLES2 = [
 var GRAY_SHADES = ["#000", "#444", "#777", "#AAA", "#CCC"];
 function renderRadarChart(ctx, w, h, data, options) {
   clearCanvas(ctx, w, h);
-  const font = options.fontFamily;
-  const cf = options.customFont;
   const fs = options.fontSize;
   const n = data.axisLabels.length;
   if (n < 3) return;
   const showLegend = options.showLegend && data.series.length > 1;
   const legendPos = options.legendPosition;
   const legendLabels = data.series.map((s) => s.label);
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, fs.dataLabel * 0.85 + 5, "line") : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, legendLabels, fs.dataLabel * 0.85 + 5, options, "line") : 0;
   const topPad = options.title ? 60 : 10;
   const rightPad = 60 + legendW;
   const leftPad = 60;
@@ -4154,6 +4780,7 @@ function renderRadarChart(ctx, w, h, data, options) {
       legendLabels,
       fs.dataLabel * 0.85 + 5,
       w - leftPad - rightPad,
+      options,
       "line",
       30
     ));
@@ -4166,7 +4793,7 @@ function renderRadarChart(ctx, w, h, data, options) {
   const cy = topPad + availH / 2;
   const angles = Array.from({ length: n }, (_, i) => -Math.PI / 2 + 2 * Math.PI * i / n);
   const labelFontSize = fs.axisLabel * 0.85;
-  const makeLabelFont = (size) => getFont(size, font, cf, "bold");
+  const makeLabelFont = (size) => getFont(size, options, "bold");
   const { radius, labelLines, labelSize } = fitAxisLabels(
     ctx,
     data.axisLabels,
@@ -4210,13 +4837,13 @@ function renderRadarChart(ctx, w, h, data, options) {
     ctx.stroke();
   }
   ctx.fillStyle = "#888";
-  ctx.font = getFont(fs.tick * 0.8, font, cf, "normal");
+  ctx.font = getFont(fs.tick * 0.8, options, "normal");
   ctx.textAlign = "left";
   ctx.textBaseline = "middle";
   for (let step = 1; step <= data.gridSteps; step++) {
     const val = maxVal / data.gridSteps * step;
     const r = step / data.gridSteps * radius;
-    ctx.fillText(formatTick4(val), cx + 4, cy - r - 2);
+    ctx.fillText(formatTick5(val), cx + 4, cy - r - 2);
   }
   ctx.fillStyle = "#000";
   ctx.font = makeLabelFont(labelSize);
@@ -4295,6 +4922,7 @@ function renderRadarChart(ctx, w, h, data, options) {
     });
     drawLegend({
       ctx,
+      fonts: options,
       items,
       position: legendPos,
       plotX: plotX2,
@@ -4309,10 +4937,10 @@ function renderRadarChart(ctx, w, h, data, options) {
   }
   const plotX = leftPad;
   const plotW = availW;
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
 }
-function formatTick4(v) {
+function formatTick5(v) {
   if (Number.isInteger(v)) return v.toString();
   return v.toFixed(1);
 }
@@ -4378,17 +5006,15 @@ function renderScatterGraph(ctx, w, h, data, options) {
   }
 }
 function renderNormal(ctx, w, h, data, options) {
-  const font = options.fontFamily;
-  const cf = options.customFont;
   const fs = options.fontSize;
   const outsideLegend = data.bubbleLegendPosition === "outside-right" && data.showBubble && data.points.length > 0;
-  const bubbleM = outsideLegend ? bubbleLegendMetrics(ctx, data, fs, font, cf) : null;
-  const fillM = outsideLegend ? measureFillLegend(ctx, data, fs, font, cf) : { boxW: 0, boxH: 0 };
+  const bubbleM = outsideLegend ? bubbleLegendMetrics(ctx, data, fs, options) : null;
+  const fillM = outsideLegend ? measureFillLegend(ctx, data, fs, options) : { boxW: 0, boxH: 0 };
   const legendW = Math.max(bubbleM?.boxW ?? 0, fillM.boxW);
   const examUnitW = (() => {
     if (data.examFrame !== true || !data.xUnit) return 0;
     ctx.save();
-    ctx.font = getFont(fs.tick, font, cf, "bold");
+    ctx.font = getFont(fs.tick, options, "bold");
     const width = ctx.measureText(data.xUnit).width;
     ctx.restore();
     return width;
@@ -4403,7 +5029,7 @@ function renderNormal(ctx, w, h, data, options) {
   const yMax = data.yRange.auto ? yAuto.max : data.yRange.max;
   const xStep = data.xRange.step ?? (data.xRange.auto ? xAuto.step : (xMax - xMin) / 5);
   const yStep = data.yRange.step ?? (data.yRange.auto ? yAuto.step : (yMax - yMin) / 5);
-  const yName = measureYAxisName(ctx, data, w, yMin, yMax, yStep, fs, font, cf);
+  const yName = measureYAxisName(ctx, data, w, yMin, yMax, yStep, fs, options);
   const padding = {
     top: options.title ? 100 : 50,
     right: legendW > 0 ? legendW + 40 : Math.max(60, examUnitW + 34),
@@ -4457,14 +5083,14 @@ function renderNormal(ctx, w, h, data, options) {
     ctx.stroke();
   }
   ctx.fillStyle = "#000";
-  ctx.font = getFont(fs.tick, font, cf, "bold");
+  ctx.font = getFont(fs.tick, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   const xTicks = [];
   for (let v = xMin; v <= xMax + xStep * 0.01; v += xStep) xTicks.push(v);
   const xStride = labelStride(
     plotW / Math.max(1, xTicks.length - 1),
-    widestLabel(ctx, xTicks.map(formatTick5))
+    widestLabel(ctx, xTicks.map(formatTick6))
   );
   let lastXLabelRight = plotX + plotW;
   xTicks.forEach((v, i) => {
@@ -4475,7 +5101,7 @@ function renderNormal(ctx, w, h, data, options) {
     ctx.lineTo(x, plotY + plotH + 6);
     ctx.stroke();
     if (i % xStride === 0) {
-      const text = formatTick5(v);
+      const text = formatTick6(v);
       ctx.fillText(text, x, plotY + plotH + 10);
       lastXLabelRight = Math.max(lastXLabelRight, x + ctx.measureText(text).width / 2);
     }
@@ -4493,9 +5119,9 @@ function renderNormal(ctx, w, h, data, options) {
     ctx.moveTo(plotX - 6, y);
     ctx.lineTo(plotX, y);
     ctx.stroke();
-    if (i % yStride === 0) ctx.fillText(formatTick5(v), plotX - 10, y);
+    if (i % yStride === 0) ctx.fillText(formatTick6(v), plotX - 10, y);
   });
-  ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+  ctx.font = getFont(fs.axisLabel, options, "bold");
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   drawFloatingLabel(
@@ -4506,16 +5132,16 @@ function renderNormal(ctx, w, h, data, options) {
     w,
     h,
     fs.axisLabel,
-    (size) => getFont(size, font, cf, "bold")
+    (size) => getFont(size, options, "bold")
   );
-  ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+  ctx.font = getFont(fs.axisLabel, options, "bold");
   if (data.xUnit) {
     if (exam) {
-      ctx.font = getFont(fs.tick, font, cf, "bold");
+      ctx.font = getFont(fs.tick, options, "bold");
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
       ctx.fillText(data.xUnit, lastXLabelRight + 6, plotY + plotH + 10);
-      ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+      ctx.font = getFont(fs.axisLabel, options, "bold");
     } else {
       ctx.textAlign = "right";
       ctx.textBaseline = "top";
@@ -4533,10 +5159,10 @@ function renderNormal(ctx, w, h, data, options) {
       w,
       h,
       fs.axisLabel,
-      (size) => getFont(size, font, cf, "bold")
+      (size) => getFont(size, options, "bold")
     );
   }
-  ctx.font = getFont(yName.size, font, cf, "bold");
+  ctx.font = getFont(yName.size, options, "bold");
   ctx.textAlign = "right";
   ctx.textBaseline = "middle";
   const yNameLineH = yName.size * 1.3;
@@ -4547,15 +5173,14 @@ function renderNormal(ctx, w, h, data, options) {
     clampLinesMiddle(ctx, yName.lines, plotY + plotH / 2, yNameLineH, h),
     yNameLineH
   );
-  ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+  ctx.font = getFont(fs.axisLabel, options, "bold");
   drawPoints(
     ctx,
     data,
     toCanvasX,
     toCanvasY,
     fs,
-    font,
-    cf,
+    options,
     options.showDataLabels,
     { left: plotX, right: plotX + plotW, top: plotY, bottom: plotY + plotH },
     w,
@@ -4565,22 +5190,20 @@ function renderNormal(ctx, w, h, data, options) {
     const x = plotX + plotW + 20;
     let y = plotY;
     if (bubbleM) {
-      drawBubbleLegendAt(ctx, bubbleM, x, y, font, cf);
+      drawBubbleLegendAt(ctx, bubbleM, x, y, options);
       y += bubbleM.boxH + 8;
     }
-    if (fillM.boxH > 0) drawFillLegendAt(ctx, data, x, y, fillM, fs, font, cf);
+    if (fillM.boxH > 0) drawFillLegendAt(ctx, data, x, y, fillM, fs, options);
   } else if (data.showBubble && data.points.length > 0) {
     const avoid = bubbleRects(data, toCanvasX, toCanvasY);
-    const fill = measureFillLegend(ctx, data, fs, font, cf);
-    const used = drawBubbleLegend(ctx, data, plotX, plotY, plotW, plotH, fs, font, cf, avoid, fill.boxH);
-    drawFillLegend(ctx, data, plotX, plotY, plotW, plotH, used.bottom, fs, font, cf, used.corner);
+    const fill = measureFillLegend(ctx, data, fs, options);
+    const used = drawBubbleLegend(ctx, data, plotX, plotY, plotW, plotH, fs, options, avoid, fill.boxH);
+    drawFillLegend(ctx, data, plotX, plotY, plotW, plotH, used.bottom, fs, options, used.corner);
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, sourceInline: options.sourceInline, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, sourceInline: options.sourceInline, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
 }
 function renderDeviation(ctx, w, h, data, options) {
-  const font = options.fontFamily;
-  const cf = options.customFont;
   const fs = options.fontSize;
   const padding = {
     // 상자 축이름은 그래프 위에 놓이고 그 아래에 y 단위가 들어가므로 자리를 더 준다
@@ -4657,7 +5280,7 @@ function renderDeviation(ctx, w, h, data, options) {
   ctx.lineTo(plotX + plotW, originY);
   ctx.stroke();
   ctx.fillStyle = "#000";
-  ctx.font = getFont(fs.tick, font, cf, "bold");
+  ctx.font = getFont(fs.tick, options, "bold");
   ctx.textAlign = "right";
   ctx.textBaseline = "top";
   ctx.fillText("0", originX - 6, originY + 4);
@@ -4669,7 +5292,7 @@ function renderDeviation(ctx, w, h, data, options) {
   for (let v = -xLimit; v <= xLimit + xStep * 0.01; v += xStep) devXTicks.push(v);
   const devXStride = labelStride(
     plotW / Math.max(1, devXTicks.length - 1),
-    widestLabel(ctx, devXTicks.map(formatTick5))
+    widestLabel(ctx, devXTicks.map(formatTick6))
   );
   devXTicks.forEach((v, i) => {
     if (Math.abs(v) < xStep * 0.01) return;
@@ -4679,14 +5302,14 @@ function renderDeviation(ctx, w, h, data, options) {
     ctx.moveTo(x, xTickBase);
     ctx.lineTo(x, xTickBase + 6);
     ctx.stroke();
-    if (i % devXStride === 0) ctx.fillText(formatTick5(v), x, xTickBase + 10);
+    if (i % devXStride === 0) ctx.fillText(formatTick6(v), x, xTickBase + 10);
   });
   ctx.textAlign = "right";
   ctx.textBaseline = "middle";
   const devYTicks = [];
   for (let v = -yLimit; v <= yLimit + yStep * 0.01; v += yStep) devYTicks.push(v);
   const devYStride = labelStride(plotH / Math.max(1, devYTicks.length - 1), fs.tick * 1.1);
-  const yTickTextW = widestLabel(ctx, devYTicks.map(formatTick5));
+  const yTickTextW = widestLabel(ctx, devYTicks.map(formatTick6));
   devYTicks.forEach((v, i) => {
     if (Math.abs(v) < yStep * 0.01) return;
     const y = toCanvasY(v);
@@ -4695,9 +5318,9 @@ function renderDeviation(ctx, w, h, data, options) {
     ctx.moveTo(yTickBase - 6, y);
     ctx.lineTo(yTickBase, y);
     ctx.stroke();
-    if (i % devYStride === 0) ctx.fillText(formatTick5(v), yTickBase - 10, y);
+    if (i % devYStride === 0) ctx.fillText(formatTick6(v), yTickBase - 10, y);
   });
-  ctx.font = getFont(fs.axisLabel, font, cf, "bold");
+  ctx.font = getFont(fs.axisLabel, options, "bold");
   if (!data.boxedAxisLabels) {
     ctx.textAlign = "center";
     ctx.textBaseline = "top";
@@ -4736,8 +5359,7 @@ function renderDeviation(ctx, w, h, data, options) {
     toCanvasX,
     toCanvasY,
     fs,
-    font,
-    cf,
+    options,
     options.showDataLabels,
     { left: plotX, right: plotX + plotW, top: plotY, bottom: plotY + plotH },
     w,
@@ -4752,15 +5374,14 @@ function renderDeviation(ctx, w, h, data, options) {
       plotW,
       plotH,
       fs,
-      font,
-      cf,
+      options,
       bubbleRects(data, toCanvasX, toCanvasY)
     );
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, sourceInline: options.sourceInline, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: fs.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, sourceInline: options.sourceInline, footnotes: options.footnotes, fontSize: fs.dataLabel, canvasWidth: w });
 }
-function drawPoints(ctx, data, toX, toY, fs, font, cf, showLabels, bounds, canvasW, canvasH) {
+function drawPoints(ctx, data, toX, toY, fs, options, showLabels, bounds, canvasW, canvasH) {
   const maxSize = data.points.length > 0 ? Math.max(...data.points.map((p) => p.size), 1) : 1;
   const placer = new LabelPlacer();
   if (bounds) {
@@ -4769,8 +5390,8 @@ function drawPoints(ctx, data, toX, toY, fs, font, cf, showLabels, bounds, canva
       placer.reserveCircle(toX(pt.x), toY(pt.y), r);
     }
   }
-  const drawOrder = [...data.points].sort((a, b) => b.size - a.size);
-  for (const pt of drawOrder) {
+  const drawOrder2 = [...data.points].sort((a, b) => b.size - a.size);
+  for (const pt of drawOrder2) {
     const cx = toX(pt.x);
     const cy = toY(pt.y);
     if (data.showBubble && pt.size > 0) {
@@ -4794,7 +5415,7 @@ function drawPoints(ctx, data, toX, toY, fs, font, cf, showLabels, bounds, canva
     }
     if (pt.label) {
       ctx.fillStyle = "#000";
-      ctx.font = getFont(fs.dataLabel, font, cf, "bold");
+      ctx.font = getFont(fs.dataLabel, options, "bold");
       const offset = data.showBubble && pt.size > 0 ? pt.size / maxSize * data.bubbleScale + 4 : 8;
       if (bounds) {
         placer.place(ctx, pt.label, cx, cy, {
@@ -4810,7 +5431,7 @@ function drawPoints(ctx, data, toX, toY, fs, font, cf, showLabels, bounds, canva
     }
     if (showLabels) {
       ctx.fillStyle = "#555";
-      ctx.font = getFont(fs.dataLabel * 0.8, font, cf, "normal");
+      ctx.font = getFont(fs.dataLabel * 0.8, options, "normal");
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
       const offset = data.showBubble && pt.size > 0 ? pt.size / maxSize * data.bubbleScale + 4 : 8;
@@ -4836,16 +5457,16 @@ function symmetricRange(absMax) {
   const step = limit / 4;
   return { limit, step };
 }
-function formatTick5(v) {
+function formatTick6(v) {
   return Math.abs(v) < 1e-4 ? "0" : Number(v.toFixed(2)).toString();
 }
-function measureYAxisName(ctx, data, w, yMin, yMax, yStep, fs, font, cf) {
+function measureYAxisName(ctx, data, w, yMin, yMax, yStep, fs, options) {
   ctx.save();
-  ctx.font = getFont(fs.tick, font, cf, "bold");
+  ctx.font = getFont(fs.tick, options, "bold");
   const ticks = [];
   for (let v = yMin; v <= yMax + yStep * 0.01; v += yStep) ticks.push(v);
-  const tickW = widestLabel(ctx, ticks.map(formatTick5));
-  const makeFont = (size2) => getFont(size2, font, cf, "bold");
+  const tickW = widestLabel(ctx, ticks.map(formatTick6));
+  const makeFont = (size2) => getFont(size2, options, "bold");
   ctx.font = makeFont(fs.axisLabel);
   const given = (data.yLabel || "").split("\\n");
   const budget = Math.max(40, w * 0.3 - 18 - tickW - 12);
@@ -4894,12 +5515,12 @@ function pickLegendCorner(preferred, boxW, boxH, plotX, plotY, plotW, plotH, avo
   }
   return { corner: best.corner, x: best.x, y: best.y };
 }
-function measureFillLegend(ctx, data, fs, font, cf) {
+function measureFillLegend(ctx, data, fs, options) {
   const legend = data.fillLegend;
   if (!legend || legend.items.length === 0) return { boxW: 0, boxH: 0 };
   const fontSize = fs.dataLabel * 0.8;
   ctx.save();
-  ctx.font = getFont(fontSize, font, cf, "bold");
+  ctx.font = getFont(fontSize, options, "bold");
   const rowH = fontSize * 1.5;
   const swatch = fontSize * 0.95;
   const pad = 8;
@@ -4911,7 +5532,7 @@ function measureFillLegend(ctx, data, fs, font, cf) {
   ctx.restore();
   return { boxW: textW + pad * 2, boxH: titleH + legend.items.length * rowH + pad * 2 };
 }
-function bubbleLegendMetrics(ctx, data, fs, font, cf) {
+function bubbleLegendMetrics(ctx, data, fs, options) {
   const sizes = data.points.map((p) => p.size).filter((s) => s > 0);
   if (sizes.length === 0) return null;
   const maxSize = Math.max(...sizes);
@@ -4924,7 +5545,7 @@ function bubbleLegendMetrics(ctx, data, fs, font, cf) {
   const maxR = radiusOf(uniqueSteps[0]);
   const labelFontSize = fs.dataLabel * 0.85;
   ctx.save();
-  ctx.font = getFont(labelFontSize, font, cf, "bold");
+  ctx.font = getFont(labelFontSize, options, "bold");
   const labelW = Math.max(50, ...uniqueSteps.map((v) => ctx.measureText(labelOf(v)).width));
   ctx.restore();
   const pad = 14;
@@ -4941,7 +5562,7 @@ function bubbleLegendMetrics(ctx, data, fs, font, cf) {
   const boxH = maxR * 2 + lowest + pad * 2 + 10;
   return { uniqueSteps, labelOf, radiusOf, maxR, boxW, boxH, labelOffsets, lowest, labelFontSize, pad };
 }
-function drawBubbleLegendAt(ctx, m, boxX, boxY, font, cf) {
+function drawBubbleLegendAt(ctx, m, boxX, boxY, options) {
   ctx.fillStyle = "#fff";
   ctx.strokeStyle = "#666";
   ctx.lineWidth = 1.5;
@@ -4970,18 +5591,18 @@ function drawBubbleLegendAt(ctx, m, boxX, boxY, font, cf) {
     ctx.stroke();
     ctx.restore();
     ctx.fillStyle = "#000";
-    ctx.font = getFont(m.labelFontSize, font, cf, "bold");
+    ctx.font = getFont(m.labelFontSize, options, "bold");
     ctx.textAlign = "left";
     ctx.textBaseline = "middle";
     ctx.fillText(m.labelOf(size), circleX + m.maxR + 16, bottomCircleY + m.labelOffsets[si]);
   });
 }
-function drawBubbleLegend(ctx, data, plotX, plotY, plotW, plotH, fs, font, cf, avoid = [], extraH = 0) {
+function drawBubbleLegend(ctx, data, plotX, plotY, plotW, plotH, fs, options, avoid = [], extraH = 0) {
   const preferred = insideCorner(data.bubbleLegendPosition);
-  const m = bubbleLegendMetrics(ctx, data, fs, font, cf);
+  const m = bubbleLegendMetrics(ctx, data, fs, options);
   if (!m) return { height: 0, corner: preferred, bottom: 0 };
   const spot = pickLegendCorner(preferred, m.boxW, m.boxH, plotX, plotY, plotW, plotH, avoid, extraH);
-  drawBubbleLegendAt(ctx, m, spot.x, spot.y, font, cf);
+  drawBubbleLegendAt(ctx, m, spot.x, spot.y, options);
   return { height: m.boxH, corner: spot.corner, bottom: spot.y + m.boxH };
 }
 function drawBoxedLabel(ctx, text, x, y, fontSize, place) {
@@ -5009,12 +5630,12 @@ function drawBoxedLabel(ctx, text, x, y, fontSize, place) {
   }
   ctx.restore();
 }
-function drawFillLegendAt(ctx, data, boxX, boxY, m, fs, font, cf) {
+function drawFillLegendAt(ctx, data, boxX, boxY, m, fs, options) {
   const legend = data.fillLegend;
   if (!legend || legend.items.length === 0) return;
   const fontSize = fs.dataLabel * 0.8;
   ctx.save();
-  ctx.font = getFont(fontSize, font, cf, "bold");
+  ctx.font = getFont(fontSize, options, "bold");
   const rowH = fontSize * 1.5;
   const swatch = fontSize * 0.95;
   const pad = 8;
@@ -5046,13 +5667,13 @@ function drawFillLegendAt(ctx, data, boxX, boxY, m, fs, font, cf) {
   }
   ctx.restore();
 }
-function drawFillLegend(ctx, data, plotX, plotY, plotW, plotH, stackBelow, fs, font, cf, corner = "bottom-right") {
+function drawFillLegend(ctx, data, plotX, plotY, plotW, plotH, stackBelow, fs, options, corner = "bottom-right") {
   const legend = data.fillLegend;
   if (!legend || legend.items.length === 0) return;
-  const m = measureFillLegend(ctx, data, fs, font, cf);
+  const m = measureFillLegend(ctx, data, fs, options);
   const boxX = corner.endsWith("right") ? plotX + plotW - m.boxW - 10 : plotX + 10;
   const boxY = stackBelow > 0 ? stackBelow + 6 : corner.startsWith("top") ? plotY + 10 : plotY + plotH - m.boxH - 10;
-  drawFillLegendAt(ctx, data, boxX, boxY, m, fs, font, cf);
+  drawFillLegendAt(ctx, data, boxX, boxY, m, fs, options);
 }
 
 // src/core/graphs/StackedBarPie.ts
@@ -5067,13 +5688,14 @@ function renderStackedGraph(ctx, w, h, data, options) {
 function renderStackedBar(ctx, w, h, data, options) {
   const showLegend = options.showLegend;
   const legendPos = options.legendPosition;
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const isVertical = data.barDirection === "vertical";
   const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(
     ctx,
     data.seriesLabels,
     options.fontSize.dataLabel * 0.85 + 5,
-    w - (isVertical ? 80 : 100) - (isVertical ? 60 + legendW : 160 + legendW)
+    w - (isVertical ? 80 : 100) - (isVertical ? 60 + legendW : 160 + legendW),
+    options
   ) : 0;
   const padding = {
     top: options.title ? 100 : 50,
@@ -5092,8 +5714,6 @@ function renderStackedBar(ctx, w, h, data, options) {
   const plotY = padding.top;
   const plotW = w - padding.left - padding.right;
   const plotH = h - padding.top - padding.bottom;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const n = data.categories.length;
   const sCount = data.seriesLabels.length;
   ctx.strokeStyle = "#000";
@@ -5107,7 +5727,7 @@ function renderStackedBar(ctx, w, h, data, options) {
     ctx.lineTo(plotX, plotY);
     ctx.stroke();
     const stepV = data.axisStep ?? 20;
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.fillStyle = "#000";
     ctx.textAlign = "right";
     ctx.textBaseline = "middle";
@@ -5131,7 +5751,7 @@ function renderStackedBar(ctx, w, h, data, options) {
         ctx.restore();
       }
     }
-    ctx.font = getFont(options.fontSize.axisLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
     ctx.textAlign = "right";
     ctx.textBaseline = "bottom";
     ctx.fillText(data.unit, plotX - 10, plotY - 16);
@@ -5152,10 +5772,10 @@ function renderStackedBar(ctx, w, h, data, options) {
         ctx.lineWidth = 0.8;
         ctx.strokeRect(cx - barW / 2, y, barW, barH);
         if (data.labelInSegment) {
-          drawSegmentLabel(ctx, data, options, s, cx, y + barH / 2, barW, barH, lightAt(data, s), font, customFont);
+          drawSegmentLabel(ctx, data, options, s, cx, y + barH / 2, barW, barH, lightAt(data, s));
         } else if (options.showDataLabels && barH > options.fontSize.dataLabel) {
           ctx.fillStyle = lightAt(data, s) ? "#000" : "#fff";
-          ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+          ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
           ctx.fillText(String(val), cx, y + barH / 2);
@@ -5163,7 +5783,7 @@ function renderStackedBar(ctx, w, h, data, options) {
         cumY += barH;
       }
       ctx.fillStyle = "#000";
-      ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.tick, options, "bold");
       ctx.textAlign = "center";
       ctx.textBaseline = "top";
       ctx.fillText(data.categories[c].label, cx, plotY + plotH + 12);
@@ -5177,7 +5797,7 @@ function renderStackedBar(ctx, w, h, data, options) {
     ctx.lineTo(plotX, plotY);
     ctx.stroke();
     const stepH = data.axisStep ?? 20;
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.fillStyle = "#000";
     ctx.textAlign = "center";
     ctx.textBaseline = "top";
@@ -5201,7 +5821,7 @@ function renderStackedBar(ctx, w, h, data, options) {
         ctx.restore();
       }
     }
-    ctx.font = getFont(options.fontSize.axisLabel, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.axisLabel, options, "bold");
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
     ctx.fillText(data.unit, plotX + plotW + 30, plotY + plotH + 10);
@@ -5223,7 +5843,7 @@ function renderStackedBar(ctx, w, h, data, options) {
         ctx.strokeRect(x, cy - barH / 2, bw, barH);
         if (options.showDataLabels && bw > options.fontSize.dataLabel * 2) {
           ctx.fillStyle = lightAt(data, s) ? "#000" : "#fff";
-          ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+          ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
           ctx.fillText(String(val), x + bw / 2, cy);
@@ -5231,13 +5851,13 @@ function renderStackedBar(ctx, w, h, data, options) {
         cumX += bw;
       }
       ctx.fillStyle = "#000";
-      ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.tick, options, "bold");
       ctx.textAlign = "right";
       ctx.textBaseline = "middle";
       ctx.fillText(data.categories[c].label, plotX - 10, cy);
     }
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   if (showLegend) {
     const items = data.seriesLabels.map((label, i) => ({
       type: "rect",
@@ -5247,6 +5867,7 @@ function renderStackedBar(ctx, w, h, data, options) {
     }));
     drawLegend({
       ctx,
+      fonts: options,
       items,
       position: legendPos,
       plotX,
@@ -5258,17 +5879,18 @@ function renderStackedBar(ctx, w, h, data, options) {
       fontSize: options.fontSize.dataLabel * 0.85 + 5
     });
   }
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, sourceLeft: options.sourceLeft, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, sourceLeft: options.sourceLeft, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
 function renderPieChart(ctx, w, h, data, options) {
   const showLegend = options.showLegend;
   const legendPos = options.legendPosition;
-  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5) : 0;
+  const legendW = showLegend && legendPos === "right" ? measureLegendWidth(ctx, data.seriesLabels, options.fontSize.dataLabel * 0.85 + 5, options) : 0;
   const legendReserve = showLegend && legendPos === "bottom" ? measureBottomLegend(
     ctx,
     data.seriesLabels,
     options.fontSize.dataLabel * 0.85 + 5,
     w - 60 - (60 + legendW),
+    options,
     "rect",
     16
   ) : 0;
@@ -5289,8 +5911,6 @@ function renderPieChart(ctx, w, h, data, options) {
   const plotY = padding.top;
   const plotW = w - padding.left - padding.right;
   const plotH = h - padding.top - padding.bottom;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const n = data.categories.length;
   const sCount = data.seriesLabels.length;
   const pieScale = (data.pieScale ?? 100) / 100;
@@ -5330,7 +5950,7 @@ function renderPieChart(ctx, w, h, data, options) {
         const lx = cx + Math.cos(midAngle) * maxR * 0.65;
         const ly = cy + Math.sin(midAngle) * maxR * 0.65;
         ctx.fillStyle = lightAt(data, s) ? "#000" : "#fff";
-        ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont, "bold");
+        ctx.font = getFont(options.fontSize.dataLabel * 0.8, options, "bold");
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
         ctx.fillText(String(val), lx, ly);
@@ -5343,12 +5963,12 @@ function renderPieChart(ctx, w, h, data, options) {
     ctx.arc(cx, cy, maxR, 0, Math.PI * 2);
     ctx.stroke();
     ctx.fillStyle = "#000";
-    ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+    ctx.font = getFont(options.fontSize.tick, options, "bold");
     ctx.textAlign = "center";
     ctx.textBaseline = "top";
     ctx.fillText(data.categories[c].label, cx, cy + maxR + 12);
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
   if (showLegend) {
     const items = data.seriesLabels.map((label, i) => ({
       type: "rect",
@@ -5366,6 +5986,7 @@ function renderPieChart(ctx, w, h, data, options) {
       const effectivePlotH = pieBottom - plotY;
       drawLegend({
         ctx,
+        fonts: options,
         items,
         position: legendPos,
         plotX,
@@ -5383,6 +6004,7 @@ function renderPieChart(ctx, w, h, data, options) {
       const effectivePlotH = pieBottom - plotY;
       drawLegend({
         ctx,
+        fonts: options,
         items,
         position: legendPos,
         plotX,
@@ -5396,7 +6018,7 @@ function renderPieChart(ctx, w, h, data, options) {
       });
     }
   }
-  drawSourceAndFootnote({ ctx, plotX, plotW, height: h, source: options.source, sourceLeft: options.sourceLeft, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX, plotW, height: h, source: options.source, sourceLeft: options.sourceLeft, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
 function stackOrder(cat, sCount) {
   const given = cat.segmentOrder;
@@ -5414,12 +6036,12 @@ function lightAt(data, i) {
   const v = data.seriesFills?.[i];
   return v === void 0 || v === null ? isLightFill(i) : isLightFillValue(v);
 }
-function drawSegmentLabel(ctx, data, options, s, cx, cy, barW, barH, light, font, customFont) {
+function drawSegmentLabel(ctx, data, options, s, cx, cy, barW, barH, light) {
   const text = data.seriesLabels[s] ?? "";
   const size = options.fontSize.dataLabel * 0.9;
   if (!text || barH < size * 1.1) return;
-  const family = data.seriesIsSymbol && !data.seriesIsSymbol[s] ? "sans" : font;
-  ctx.font = getFont(size, family, customFont, "bold");
+  const family = data.seriesIsSymbol && !data.seriesIsSymbol[s] ? "sans" : options.fontFamily;
+  ctx.font = getFont(size, options, "bold", family);
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   const maxW = Math.max(1, barW - 6);
@@ -5484,8 +6106,6 @@ function renderTernaryGraph(ctx, w, h, data, options) {
   const triH = triSize * Math.sqrt(3) / 2;
   const cx = plotX + plotW / 2;
   const cy = padding.top + 11 + triH * 2 / 3;
-  const font = options.fontFamily;
-  const customFont = options.customFont;
   const topPt = { x: cx, y: cy - triH * 2 / 3 };
   const leftPt = { x: cx - triSize / 2, y: cy + triH / 3 };
   const rightPt = { x: cx + triSize / 2, y: cy + triH / 3 };
@@ -5529,7 +6149,7 @@ function renderTernaryGraph(ctx, w, h, data, options) {
   const bTick = { x: Math.cos(Math.PI / 3), y: Math.sin(Math.PI / 3) };
   const cTick = { x: Math.cos(Math.PI / 3), y: -Math.sin(Math.PI / 3) };
   ctx.fillStyle = "#000";
-  ctx.font = getFont(options.fontSize.tick, font, customFont, "bold");
+  ctx.font = getFont(options.fontSize.tick, options, "bold");
   ctx.strokeStyle = "#000";
   ctx.lineWidth = 1.5;
   for (let i = 0; i <= steps; i++) {
@@ -5561,7 +6181,7 @@ function renderTernaryGraph(ctx, w, h, data, options) {
     const cAt = nudgeInside(ctx, cLabel, cPos.x + cTick.x * tickLen + 4, cPos.y + cTick.y * tickLen, w, h);
     ctx.fillText(cLabel, cAt.x, cAt.y);
   }
-  ctx.font = getFont(nameFit.fontSize, font, customFont, "bold");
+  ctx.font = getFont(nameFit.fontSize, options, "bold");
   ctx.fillStyle = "#000";
   const labelLineH = nameFit.fontSize * 1.3;
   const spots = namePlaces(w, plotX + plotW / 2, padding.top, triSize, nameFit.lines, labelLineH);
@@ -5579,21 +6199,21 @@ function renderTernaryGraph(ctx, w, h, data, options) {
     ctx.fill();
     if (p.label) {
       ctx.fillStyle = "#000";
-      ctx.font = getFont(options.fontSize.dataLabel, font, customFont, "bold");
+      ctx.font = getFont(options.fontSize.dataLabel, options, "bold");
       ctx.textAlign = "left";
       ctx.textBaseline = "bottom";
       ctx.fillText(p.label, x + 10, y - 4);
     }
     if (options.showDataLabels) {
       ctx.fillStyle = "#555";
-      ctx.font = getFont(options.fontSize.dataLabel * 0.8, font, customFont);
+      ctx.font = getFont(options.fontSize.dataLabel * 0.8, options);
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
       ctx.fillText(`(${p.a}, ${p.b}, ${p.c})`, x + 10, y + 4);
     }
   }
-  drawTitle({ ctx, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
-  drawSourceAndFootnote({ ctx, plotX: leftPt.x, plotW: rightPt.x - leftPt.x, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
+  drawTitle({ ctx, fonts: options, plotX, plotW, title: options.title, fontSize: options.fontSize.title, canvasWidth: w });
+  drawSourceAndFootnote({ ctx, fonts: options, plotX: leftPt.x, plotW: rightPt.x - leftPt.x, height: h, source: options.source, footnotes: options.footnotes, fontSize: options.fontSize.dataLabel, canvasWidth: w });
 }
 var SHRINK_LIMIT3 = 0.8;
 function namePlaces(_w, cx, padTop, triSize, lines, lineH) {
@@ -5613,7 +6233,7 @@ function namePlaces(_w, cx, padTop, triSize, lines, lineH) {
 }
 function fitAxisNames(ctx, labels, options, w, h, cx, padTop, maxSize) {
   ctx.save();
-  const makeFont = (size2) => getFont(size2, options.fontFamily, options.customFont, "bold");
+  const makeFont = (size2) => getFont(size2, options, "bold");
   let fontSize = options.fontSize.axisLabel * 1.3;
   const given = labels.map((l) => (l || "").split("\\n"));
   let lines = given.map((g) => g.slice());
@@ -5667,6 +6287,7 @@ var REGISTRY = {
   // 위 climate 주석 참고 — 이 칸의 렌더러만 바꾼 오배선은 컴파일러가 잡지 못한다.
   "deviation-a": { render: renderDeviationAGraph, createDefaultData: createDefaultDeviationAData },
   "deviation-b": { render: renderDeviationBGraph, createDefaultData: createDefaultDeviationBData },
+  "econ-plane": { render: renderEconPlane, createDefaultData: createDefaultEconPlaneData },
   hythergraph: { render: renderHythergraph, createDefaultData: createDefaultHythergraphData },
   line: { render: renderLineGraph, createDefaultData: createDefaultLineData },
   "matrix-table": { render: renderMatrixTable, createDefaultData: createDefaultMatrixTableData },
@@ -5927,6 +6548,7 @@ function mergeOptions(base, patch) {
     ...base,
     ...patch,
     fontSize: { ...base.fontSize, ...patch?.fontSize },
+    fontStack: { ...base.fontStack, ...patch?.fontStack },
     footnotes: [...patch?.footnotes ?? base.footnotes]
   };
 }
@@ -5954,7 +6576,7 @@ var CsatChart = class {
    *
    * 필드가 아니라 **메서드**로 둔다. `static readonly ensureFonts = ensureFonts`
    * 로 적으면 ES2020 로 낮출 때 클래스 «뒤» 의 대입문이 되는데, 그것은 지울 수
-   * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 16종이 모든 번들에 박힌다.
+   * 없는 부수효과라 이 클래스와 레지스트리와 렌더러 17종이 모든 번들에 박힌다.
    * 메서드는 클래스 본문의 일부라 어느 목표에서도 그런 일이 없다 — 실제로
    * 겪은 문제이고, `test/bundle.test.ts` 가 이걸 회귀로 잡지는 않으니 여기
    * 적어 둔다.
@@ -6130,6 +6752,7 @@ var LINE_DASH2 = /* @__PURE__ */ Object.freeze({
   MONTH_LABELS_EN,
   MONTH_LABELS_NUM,
   autoRange,
+  createAdAsData,
   createDefaultAbsBarData,
   createDefaultCategoryDotData,
   createDefaultClimateData,
@@ -6137,6 +6760,7 @@ var LINE_DASH2 = /* @__PURE__ */ Object.freeze({
   createDefaultDataTableData,
   createDefaultDeviationAData,
   createDefaultDeviationBData,
+  createDefaultEconPlaneData,
   createDefaultGraphOptions,
   createDefaultHythergraphData,
   createDefaultLineData,
@@ -6147,6 +6771,8 @@ var LINE_DASH2 = /* @__PURE__ */ Object.freeze({
   createDefaultStackedData,
   createDefaultTernaryData,
   createDefaultTreemapData,
+  createPointShiftData,
+  createSupplyDemandData,
   ensureFonts,
   installRoundRectPolyfill,
   isCsatChartType,
@@ -6158,6 +6784,7 @@ var LINE_DASH2 = /* @__PURE__ */ Object.freeze({
   renderDataTable,
   renderDeviationAGraph,
   renderDeviationBGraph,
+  renderEconPlane,
   renderHythergraph,
   renderLineGraph,
   renderMatrixTable,