@openpresentation/opf-render 0.13.1 → 0.14.0

package/dist/chart-options.js

@@ -3,17 +3,16 @@
 // Core owns the normalisation and the per-type support table (`resolveChartOptions`); this module owns the drawing.
 // A chart that carries none of the three fields resolves to `active: false` and never reaches any code here, so
 // its SVG is exactly what it was before.
-import * as core from "@openpresentation/opf/composition";
+import { chartLabelText, formatChartLabelNumber, formatChartLabelPercent, formatDataNumber, resolveChartOptions, textColorForFill } from "@openpresentation/opf/composition";
 
 const INACTIVE = Object.freeze({ active: false, axisTitles: {}, diagnostics: [] });
 
 /**
- * The resolved options of a chart. An older core without `resolveChartOptions` ignores the fields, like any other
- * field it does not know. `spec` is the catalog spec this module's charts.js resolved (`kind`, `grouping`).
+ * The resolved options of a chart. `spec` is the catalog spec this module's charts.js resolved (`kind`, `grouping`).
  */
 export function resolveOptions(chart, spec) {
-  if (typeof core.resolveChartOptions !== "function" || !chart || typeof chart !== "object") return INACTIVE;
-  return core.resolveChartOptions(chart, { kind: spec.kind, stacked: spec.grouping === "stacked" || spec.grouping === "percentStacked" });
+  if (!chart || typeof chart !== "object") return INACTIVE;
+  return resolveChartOptions(chart, { kind: spec.kind, stacked: spec.grouping === "stacked" || spec.grouping === "percentStacked" });
 }
 
 export function reportOptionDiagnostics(c, resolved) {
@@ -22,9 +21,13 @@ export function reportOptionDiagnostics(c, resolved) {
   }
 }
 
-/** Which edge carries which axis title: the category axis of a bar or funnel chart is vertical (left). */
-function titleSides(spec) {
+/**
+ * Which edge carries which axis title: the category axis of a bar or funnel chart is vertical (left). A combo chart titles its
+ * secondary value axis at the right, next to that axis; right to left, its two value axes trade sides (FA-15).
+ */
+function titleSides(spec, rtl = false) {
   const verticalCategory = (spec.kind === "bar" && spec.dir === "bar") || spec.kind === "funnel";
+  if (spec.kind === "combo") return rtl ? { category: "bottom", value: "right", secondary: "left" } : { category: "bottom", value: "left", secondary: "right" };
   return verticalCategory ? { category: "left", value: "bottom" } : { category: "bottom", value: "left" };
 }
 
@@ -33,12 +36,13 @@ function titleSides(spec) {
  * The renderers lay the plot out inside `c.box`, so they need no knowledge of the bands.
  */
 export function reserveAxisTitles(c, spec, titles) {
-  const sides = titleSides(spec);
-  const bands = { left: 0, bottom: 0 };
+  const sides = titleSides(spec, spec.kind === "combo" && c.bound.geometry?.direction === "rtl");
+  const bands = { left: 0, bottom: 0, right: 0 };
   c.axisTitleBands = [];
-  for (const axis of ["category", "value"]) {
+  for (const axis of ["category", "value", "secondary"]) {
     const text = titles[axis];
-    if (!text) continue;
+    // A secondary title is drawn only when the combo chart has a secondary axis (core reports the title it drops).
+    if (!text || !sides[axis] || (axis === "secondary" && !c.combo?.some((entry) => entry.axis === "secondary"))) continue;
     const side = sides[axis];
     bands[side] = c.lineHeight;
     c.axisTitleBands.push({ axis, side, text });
@@ -46,7 +50,7 @@ export function reserveAxisTitles(c, spec, titles) {
   if (!c.axisTitleBands.length) return;
   const outer = c.box;
   c.axisTitleOuter = outer;
-  c.box = { x: outer.x + bands.left, y: outer.y, width: Math.max(1, outer.width - bands.left), height: Math.max(1, outer.height - bands.bottom) };
+  c.box = { x: outer.x + bands.left, y: outer.y, width: Math.max(1, outer.width - bands.left - bands.right), height: Math.max(1, outer.height - bands.bottom) };
 }
 
 /**
@@ -65,8 +69,10 @@ export function drawAxisTitles(c) {
       c.text(text, rect, path, "center");
     } else {
       const span = plot ? { y: plot.y, height: plot.height } : { y: inner.y, height: inner.height };
-      // The rotated text box is laid out horizontally, `length` wide and one line tall, then turned about its centre.
-      const length = Math.max(1, span.height), centreX = outer.x + c.lineHeight / 2, centreY = span.y + span.height / 2;
+      // The rotated text box is laid out horizontally, `length` wide and one line tall, then turned about its centre. A right title
+      // (a combo chart's secondary axis) is rotated the same way, as PowerPoint draws every vertical axis title by default.
+      const length = Math.max(1, span.height), centreY = span.y + span.height / 2;
+      const centreX = side === "right" ? outer.x + outer.width - (c.axisTitleRightInset ?? 0) - c.lineHeight / 2 : outer.x + c.lineHeight / 2;
       const rect = { x: centreX - length / 2, y: centreY - c.lineHeight / 2, width: length, height: c.lineHeight };
       const element = c.textElement(text, rect, path, "center");
       if (element) c.children.push(c.svg.tag("g", { transform: `rotate(-90 ${c.num(centreX)} ${c.num(centreY)})` }, element));
@@ -84,9 +90,9 @@ export function labelString(c, { category, value, share, format }) {
   const labels = c.dataLabels;
   const parts = {};
   if (category !== undefined && category !== null) parts.category = String(category);
-  if (typeof value === "number" && Number.isFinite(value)) parts.value = format !== undefined && typeof core.formatDataNumber === "function" ? core.formatDataNumber(value, format) : core.formatChartLabelNumber(value);
-  if (typeof share === "number" && Number.isFinite(share)) parts.percent = core.formatChartLabelPercent(share);
-  return core.chartLabelText(parts, labels.content, labels.separator);
+  if (typeof value === "number" && Number.isFinite(value)) parts.value = format !== undefined ? formatDataNumber(value, format) : formatChartLabelNumber(value);
+  if (typeof share === "number" && Number.isFinite(share)) parts.percent = formatChartLabelPercent(share);
+  return chartLabelText(parts, labels.content, labels.separator);
 }
 
 const labelSize = (c, text) => ({ width: c.width(text) + c.fontPx * 0.5, height: c.lineHeight });
@@ -99,7 +105,7 @@ function drawLabel(c, text, rect, path, fill) {
 
 /** The text colour for a label placed inside a mark of colour `fill`: the contrasting one; outside marks keep the chart text colour. */
 export function labelFill(c, position, fill) {
-  return INSIDE.has(position) && fill ? core.textColorForFill?.(fill, c.labelColor) ?? c.labelColor : c.labelColor;
+  return INSIDE.has(position) && fill ? textColorForFill(fill, c.labelColor) : c.labelColor;
 }
 
 /**
@@ -133,9 +139,8 @@ export function drawBarLabel(c, text, rect, direction, path, fill) {
   drawLabel(c, text, { x, y, width, height }, path, labelFill(c, position, fill));
 }
 
-/** A label beside a point mark (line and scatter): above, below, left, right or centred on it. */
-export function drawPointLabel(c, text, point, path) {
-  const position = c.dataLabels.position ?? "above";
+/** A label beside a point mark (line and scatter): above, below, left, right or centred on it. `position` overrides the chart's (a combo chart's line series). */
+export function drawPointLabel(c, text, point, path, position = c.dataLabels.position ?? "above") {
   const { width, height } = labelSize(c, text);
   const gap = 3 * c.pt + c.fontPx * 0.25;
   const [px, py] = point;

package/dist/charts.js

@@ -1,15 +1,11 @@
 // Chart previews for the OPF chart type catalog (FF-22).
 //
-// The core catalog keeps one chart type per Office chart construct and
-// deprecates the rest with a replacement id (`deprecation.replacedBy`,
-// `mappings.openxml`). The tables below are carried here so the preview stays
-// synchronous and self-contained; test/chart-catalog.mjs checks them against
-// the installed core catalog. Kept ids render the construct PowerPoint shows
-// for the exported chart; deprecated ids render exactly like their replacement;
-// any other id returns null so the caller keeps its legacy single-series preview.
-import { chartColorForFill, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
-// chartPaletteForFill ships with core RR-29 (opf#270); an older published core still loads and clamps each colour on its own.
-import * as opfComposition from "@openpresentation/opf/composition";
+// The core catalog keeps one chart type per Office chart construct (`mappings.openxml`).
+// The table below is carried here so the preview stays synchronous and
+// self-contained; test/chart-catalog.mjs checks it against the installed core
+// catalog. Catalog ids render the construct PowerPoint shows for the exported
+// chart; any other id returns null so the caller keeps its legacy single-series preview.
+import { chartHighlightColors, chartHighlightMarks, chartNumber, chartPaletteForFill, formatDataNumber, numberFormatError, resolveChartData, resolveTextStyle, textColorForFill, textWidthMeasurer } from "@openpresentation/opf/composition";
 import { drawAxisTitles, drawBarLabel, drawCenteredLabel, drawPointLabel, drawSliceLabel, labelString, outsideLabelReserve, reportOptionDiagnostics, reserveAxisTitles, resolveOptions } from "./chart-options.js";
 
 // Ordered series palette written by opf-pptx (`CHART_COLORS`), before the same
@@ -19,12 +15,34 @@ export const CHART_SERIES_COLORS = Object.freeze([
   "#F59E0B", "#EF4444", "#8B5CF6", "#14B8A6", "#0F172A", "#64748B"
 ]);
 
-// The series colours for a chart panel: core's `chartPaletteForFill` (contrast against the panel without letting two series merge)
-// when the installed core has it, else each colour clamped on its own.
+// The series colours for a chart panel: core's `chartPaletteForFill` (contrast against the panel without letting two series merge).
 export function chartSeriesPalette(surface) {
-  return typeof opfComposition.chartPaletteForFill === "function"
-    ? opfComposition.chartPaletteForFill(surface, CHART_SERIES_COLORS)
-    : CHART_SERIES_COLORS.map((color) => chartColorForFill(surface, color));
+  return chartPaletteForFill(surface, CHART_SERIES_COLORS);
+}
+
+// FA-14: chart.highlight. Core resolves which series and categories are named (chartHighlightMarks) and the two colours
+// (chartHighlightColors); a highlighted mark takes the accent, every other mark the muted neutral. A chart without a
+// highlight has no `c.highlight`, and every colour below is the palette colour it always was.
+function highlightFor(c, resolved, spec, data) {
+  if (!resolved.highlight) return undefined;
+  const marks = chartHighlightMarks(resolved.highlight, { columns: data.columns, hasX: spec.kind === "scatter" && data.columns.length > 2, rows: data.rows });
+  if (!marks) return undefined;
+  return { ...marks, ...chartHighlightColors(c.surface, c.bound.design.colors.primary, c.labelColor) };
+}
+
+/** The colour of series `j` as a whole (a line, an area, a legend key): the accent when highlighted, else muted. */
+function seriesColor(c, j) {
+  return c.highlight ? (c.highlight.series[j] ? c.highlight.accent : c.highlight.muted) : c.colors[j % c.colors.length];
+}
+
+/** The colour of the mark of series `j` at row `i`: highlighted when its series or its category is named. */
+function markColor(c, j, i) {
+  return c.highlight ? (c.highlight.series[j] || c.highlight.categories[i] ? c.highlight.accent : c.highlight.muted) : c.colors[j % c.colors.length];
+}
+
+/** The colour of the pie or doughnut slice of row `i`. */
+function sliceColor(c, i) {
+  return c.highlight ? (c.highlight.categories[i] ? c.highlight.accent : c.highlight.muted) : c.colors[i % c.colors.length];
 }
 
 const bar = (dir, grouping) => ({ kind: "bar", dir, grouping });
@@ -34,18 +52,18 @@ const radar = (style) => ({ kind: "radar", style, markers: style === "marker" })
 
 export const CHART_TYPES = Object.freeze({
   column: bar("col", "clustered"),
-  "stacked-column-3x": bar("col", "stacked"),
-  "100pct-stacked-column-3x": bar("col", "percentStacked"),
+  "stacked-column": bar("col", "stacked"),
+  "100pct-stacked-column": bar("col", "percentStacked"),
   bar: bar("bar", "clustered"),
-  "stacked-bar-3x": bar("bar", "stacked"),
-  "100pct-stacked-bar-3x": bar("bar", "percentStacked"),
+  "stacked-bar": bar("bar", "stacked"),
+  "100pct-stacked-bar": bar("bar", "percentStacked"),
   line: line("standard", false),
   "line-with-markers": line("standard", true),
-  "stacked-line-3x": line("stacked", false),
-  "stacked-line-with-markers-3x": line("stacked", true),
+  "stacked-line": line("stacked", false),
+  "stacked-line-with-markers": line("stacked", true),
   area: area("standard"),
-  "stacked-area-3x": area("stacked"),
-  "100pct-stacked-area-3x": area("percentStacked"),
+  "stacked-area": area("stacked"),
+  "100pct-stacked-area": area("percentStacked"),
   pie: { kind: "pie" },
   doughnut: { kind: "doughnut" },
   scatter: { kind: "scatter" },
@@ -58,46 +76,9 @@ export const CHART_TYPES = Object.freeze({
   "box-and-whisker": { kind: "box" },
   waterfall: { kind: "waterfall" },
   funnel: { kind: "funnel" },
-  world: { kind: "map" }
-});
-
-const variants = (base, target) => Object.fromEntries([base, `${base}-2x`, `${base}-3x`].map((id) => [id, target]));
-const suffixes = (base, target) => Object.fromEntries(["", "-2x", "-3x", "-4x", "-5x", "-6x"].map((suffix) => [`${base}${suffix}`, target]));
-
-// Deprecated core ids -> kept replacement (core spec/catalogs/chart-types `deprecation.replacedBy`).
-export const DEPRECATED_CHART_TYPES = Object.freeze({
-  ...variants("100pct-bullet-bar", "100pct-stacked-bar-3x"),
-  "100pct-progress-bar": "100pct-stacked-bar-3x",
-  "100pct-stacked-bar-2x": "100pct-stacked-bar-3x",
-  ...variants("100pct-bullet-column", "100pct-stacked-column-3x"),
-  "100pct-stacked-column-2x": "100pct-stacked-column-3x",
-  "100pct-stacked-area-2x": "100pct-stacked-area-3x",
-  australia: "world",
-  canada: "world",
-  "united-kingdom": "world",
-  "united-states": "world",
-  "box-and-whisker-2x": "box-and-whisker",
-  "box-and-whisker-3x": "box-and-whisker",
-  ...variants("bullet-bar", "bar"),
-  "clustered-bar-2x": "bar",
-  ...variants("bullet-column", "column"),
-  "clustered-column": "column",
-  ...suffixes("dot-plot", "scatter"),
-  dumbbell: "scatter",
-  "line-2x": "line",
-  "line-3x": "line",
-  "line-with-high-low": "line",
-  ...suffixes("sparkline", "line"),
-  "line-with-high-low-and-markers": "line-with-markers",
-  "line-with-markers-2x": "line-with-markers",
-  "line-with-markers-3x": "line-with-markers",
-  "stacked-area-2x": "stacked-area-3x",
-  "stacked-bar-2x": "stacked-bar-3x",
-  "stacked-column-2x": "stacked-column-3x",
-  "stacked-line-2x": "stacked-line-3x",
-  "stacked-line-with-markers-2x": "stacked-line-with-markers-3x",
-  "treemap-2x": "treemap",
-  "treemap-3x": "treemap"
+  world: { kind: "map" },
+  // FA-15: clustered columns with line series (markers), the lines optionally on a secondary value axis (core resolves the plan).
+  combo: { kind: "combo", dir: "col", grouping: "clustered", markers: true }
 });
 
 const ALIASES = Object.freeze({ donut: "doughnut" });
@@ -105,7 +86,7 @@ const ALIASES = Object.freeze({ donut: "doughnut" });
 /** Resolve a chart type id to its kept catalog id, or null for ids outside the catalog. */
 export function resolveChartType(type) {
   const raw = String(type ?? "").trim().toLowerCase();
-  const id = ALIASES[raw] ?? DEPRECATED_CHART_TYPES[raw] ?? raw;
+  const id = ALIASES[raw] ?? raw;
   return Object.hasOwn(CHART_TYPES, id) ? id : null;
 }
 
@@ -124,7 +105,8 @@ const RENDERERS = {
   box: renderBoxWhiskerChart,
   waterfall: renderWaterfallChart,
   funnel: renderFunnelChart,
-  map: renderRegionMapChart
+  map: renderRegionMapChart,
+  combo: renderComboChart
 };
 
 // Chartex constructs also accept a lone value column (the exporter plots it
@@ -147,6 +129,9 @@ export function renderCatalogChart(item, box, bound, options, svg) {
   // RR-35: a chart with axis titles, a legend position or data labels reserves their space before the plot is laid out. A chart
   // with none of them skips this block entirely, so its output is unchanged.
   const resolved = resolveOptions(item.value, spec);
+  // FA-14: a highlight changes colours only (no space is reserved), so it is resolved whether or not an option is active.
+  c.highlight = highlightFor(c, resolved, spec, data);
+  if (!resolved.active) reportOptionDiagnostics(c, resolved);
   if (resolved.active) {
     reportOptionDiagnostics(c, resolved);
     c.dataLabels = resolved.dataLabels;
@@ -162,20 +147,13 @@ export function renderCatalogChart(item, box, bound, options, svg) {
 // RR-54: the chart's data as the renderers plot it, from core's resolveChartData: inline columns (names or DataColumn objects),
 // a dataset reference and chart.mapping all resolve to one positional table, [category, (x,) ...series], with each column's number
 // format. Series cells have already gone through core's strict chartNumber. Returns null when the data does not resolve (an
-// external data source, an unknown dataset, no rows or columns), so the caller keeps its placeholder. A core without the resolver
-// reads the inline data as before.
+// external data source, an unknown dataset, no rows or columns), so the caller keeps its placeholder.
 export function chartData(item, bound) {
   const chart = item.value;
-  if (typeof opfComposition.resolveChartData === "function") {
-    const resolved = opfComposition.resolveChartData(chart, bound?.presentation, { path: item.path });
-    if (!resolved.ok) return null;
-    const formats = resolved.formats.map((format) => typeof format === "string" && format !== "" && !opfComposition.numberFormatError?.(format) ? format : undefined);
-    return { columns: resolved.columns, rows: resolved.rows, formats, trace: tracePaths(item, bound, resolved) };
-  }
-  const data = chart?.data;
-  const rows = Array.isArray(data?.rows) ? data.rows.map((row) => Array.isArray(row) ? row : [row]) : [];
-  const columns = Array.isArray(data?.columns) ? data.columns : [];
-  return { columns, rows, formats: [], trace: null };
+  const resolved = resolveChartData(chart, bound?.presentation, { path: item.path });
+  if (!resolved.ok) return null;
+  const formats = resolved.formats.map((format) => typeof format === "string" && format !== "" && !numberFormatError(format) ? format : undefined);
+  return { columns: resolved.columns, rows: resolved.rows, formats, trace: tracePaths(item, bound, resolved), ...(resolved.combo ? { combo: resolved.combo } : {}) };
 }
 
 // The authored object at a composed path ("slides.0.blocks.1.chart"), or undefined.
@@ -202,19 +180,19 @@ export function isDatasetTable(item, bound) {
 }
 
 // Where a mark's trace path points. A dataset-backed chart has no `data.rows` or `data.columns` of its own, so every part reports
-// the chart's authored path; a chart with `mapping` reports the authored column index of each plotted column (the resolved
-// order is category, X, then the mapped series).
+// the chart's authored path; a chart with `mapping` (or a combo chart, whose column series come before its lines) reports the
+// authored column index of each plotted column (the resolved order is category, X, then the mapped series).
 function tracePaths(item, bound, resolved) {
   if (isDatasetChart(item, bound)) return { collapse: true };
   const authored = authoredAt(bound?.presentation, item.path);
   const authoredData = authored && typeof authored === "object" ? authored.data : undefined;
-  if (!authored || typeof authored !== "object" || !authored.mapping || !Array.isArray(authoredData?.columns)) return null;
+  if (!authored || typeof authored !== "object" || (!authored.mapping && !resolved.combo) || !Array.isArray(authoredData?.columns)) return null;
   const names = authoredData.columns.map((column) => column !== null && typeof column === "object" ? column.name : column);
   const columnMap = resolved.columns.map((name, index) => { const found = names.indexOf(name); return found < 0 ? index : found; });
   return columnMap.every((column, index) => column === index) ? null : { columnMap };
 }
 
-function chartContext(item, box, bound, options, svg, { rows, columns, formats, trace }) {
+function chartContext(item, box, bound, options, svg, { rows, columns, formats, trace, combo }) {
   const u = Math.min(bound.design.dimensions.width, bound.design.dimensions.height) / 720;
   const composition = bound.composition ?? bound.geometry.composition ?? {};
   const requested = 14, fontPx = Math.max(requested, composition.minFontSize ?? 16) * u;
@@ -232,7 +210,7 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
     return path.replace(/^(.*\.data\.(?:columns\.|rows\.\d+\.))(\d+)$/, (whole, head, column) => `${head}${trace.columnMap[Number(column)] ?? column}`);
   };
   const c = {
-    item, box, bound, options, svg, rows, columns, formats, children, u, fontPx, surface, labelColor,
+    item, box, bound, options, svg, rows, columns, formats, combo, children, u, fontPx, surface, labelColor,
     path: item.path,
     pt: u * 4 / 3,
     pad: 10 * u,
@@ -276,21 +254,13 @@ function chartContext(item, box, bound, options, svg, { rows, columns, formats,
 }
 
 // RR-54: core's strict chart number (finite numbers and strict decimal strings; everything else is a gap), so the preview, the PPTX
-// export and the validator agree on which cells are numbers. A core without it keeps the previous lenient read.
-export function chartNumber(value) {
-  if (typeof opfComposition.chartNumber === "function") return opfComposition.chartNumber(value);
-  if (typeof value === "number") return Number.isFinite(value) ? value : null;
-  if (typeof value === "string" && value.trim()) {
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : null;
-  }
-  return null;
-}
+// export and the validator agree on which cells are numbers.
+export { chartNumber };
 
 /** A number as its column's format shows it (core's formatDataNumber); without a format, the General form the preview always drew. */
 export function formatChartValue(value, format) {
-  if (format === undefined || typeof opfComposition.formatDataNumber !== "function") return String(clean(value));
-  return opfComposition.formatDataNumber(clean(value), format);
+  if (format === undefined) return String(clean(value));
+  return formatDataNumber(clean(value), format);
 }
 
 // ---------------------------------------------------------------------------
@@ -435,16 +405,17 @@ function legendEntries(c, entries) {
 
 // RR-35: the legend entries of a chart whatever the series count (an explicit legend position shows a single series too).
 function legendSource(c, spec) {
-  const fromSeries = (series, key, marker = false) => series.map((s) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, key, marker }));
+  const fromSeries = (series, key, marker = false) => series.map((s) => ({ name: s.name, color: seriesColor(c, s.index), path: `${c.path}.data.columns.${s.column}`, key, marker }));
   switch (spec.kind) {
     case "pie":
-    case "doughnut": return c.rows.map((row, i) => ({ name: c.label(row[0]), color: c.colors[i % c.colors.length], path: `${c.path}.data.rows.${i}.0` }));
+    case "doughnut": return c.rows.map((row, i) => ({ name: c.label(row[0]), color: sliceColor(c, i), path: `${c.path}.data.rows.${i}.0` }));
     case "scatter": return fromSeries(scatterSeries(c.rows, c.columns, c.formats).series, "marker");
     case "line": return fromSeries(c.series(), "line", spec.markers);
     case "radar": return fromSeries(c.series(), spec.style === "filled" ? undefined : "line", spec.markers);
     case "box": return fromSeries(c.columns.length === 1 ? [{ name: c.label(c.columns[0]), column: 0, index: 0 }] : c.series());
     case "bar":
     case "area": return fromSeries(c.series());
+    case "combo": return comboLegendEntries(c, c.series());
     default: return [];
   }
 }
@@ -494,7 +465,7 @@ function placeLegend(c, spec, position) {
 
 function seriesLegend(c, series, key, marker = false) {
   return series.length > 1
-    ? legendEntries(c, series.map((s) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, key, marker })))
+    ? legendEntries(c, series.map((s) => ({ name: s.name, color: seriesColor(c, s.index), path: `${c.path}.data.columns.${s.column}`, key, marker })))
     : 0;
 }
 
@@ -845,9 +816,9 @@ function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale,
   const geometry = barGeometry(band, series.length, spec.grouping);
   const labels = [];
   series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length];
     stacks[j].forEach((point, i) => {
       if (!point) return;
+      const color = markColor(c, j, i);
       const slot = geometry.clustered ? j * geometry.width : 0;
       const a = at(base(point.from)), b = at(point.to);
       const path = `${c.path}.data.rows.${i}.${s.column}`;
@@ -871,8 +842,8 @@ function drawBars(c, spec, series, stacks, { plot, band, at, horizontal, scale,
 
 function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i) => i }) {
   const radius = 3 * c.pt;
-  series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length];
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j);
     let run = [];
     const flush = () => {
       if (run.length > 1) c.mark("polyline", { points: run.map(([x, y]) => `${c.num(x)},${c.num(y)}`).join(" "), fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, `${c.path}.data.columns.${s.column}`);
@@ -883,10 +854,13 @@ function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i)
       run.push([plot.x + (categorySlot(i) + 0.5) * band, at(point.to)]);
     });
     flush();
-    if (spec.markers) stacks[j].forEach((point, i) => {
-      if (point) c.mark("circle", { cx: plot.x + (categorySlot(i) + 0.5) * band, cy: at(point.to), r: radius, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    // FA-14: with a highlight each point takes its own colour, and a line without markers marks the highlighted categories' points.
+    if (spec.markers || c.highlight?.categories.some(Boolean)) stacks[j].forEach((point, i) => {
+      if (!point || (!spec.markers && !c.highlight.categories[i])) return;
+      const fill = markColor(c, j, i);
+      c.mark("circle", { cx: plot.x + (categorySlot(i) + 0.5) * band, cy: at(point.to), r: radius, fill, stroke: fill, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
     });
-  });
+  }
   // RR-35: data labels sit beside each point, over every line.
   if (c.dataLabels) series.forEach((s, j) => stacks[j].forEach((point, i) => {
     if (point) drawPointLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), [plot.x + (i + 0.5) * band, at(point.to)], `${c.path}.data.rows.${i}.${s.column}`);
@@ -894,20 +868,133 @@ function drawLines(c, spec, series, stacks, { plot, band, at, categorySlot = (i)
 }
 
 function drawAreas(c, series, stacks, { plot, band, at, crossing, categorySlot = (i) => i }) {
-  series.forEach((s, j) => {
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j];
     const points = stacks[j].map((point, i) => ({ x: plot.x + (categorySlot(i) + 0.5) * band, from: point.from, to: point.to }));
     const upper = points.map((p) => `${c.num(p.x)} ${c.num(at(p.to))}`);
     const lower = points.slice().reverse().map((p) => `${c.num(p.x)} ${c.num(p.from === 0 ? crossing : at(p.from))}`);
-    c.mark("path", { d: `M ${upper.join(" L ")} L ${lower.join(" L ")} Z`, fill: c.colors[j % c.colors.length] }, `${c.path}.data.columns.${s.column}`);
-  });
+    c.mark("path", { d: `M ${upper.join(" L ")} L ${lower.join(" L ")} Z`, fill: seriesColor(c, j) }, `${c.path}.data.columns.${s.column}`);
+  }
   // RR-35: an area's label sits in the area at each category, halfway between its lower and upper edge.
   if (c.dataLabels) series.forEach((s, j) => stacks[j].forEach((point, i) => {
     if (!point) return;
     const lowerEdge = point.from === 0 ? crossing : at(point.from);
-    drawCenteredLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), plot.x + (i + 0.5) * band, (lowerEdge + at(point.to)) / 2, `${c.path}.data.rows.${i}.${s.column}`, c.colors[j % c.colors.length]);
+    drawCenteredLabel(c, labelString(c, { category: c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]), value: s.values[i], format: s.format }), plot.x + (i + 0.5) * band, (lowerEdge + at(point.to)) / 2, `${c.path}.data.rows.${i}.${s.column}`, seriesColor(c, j));
   }));
 }
 
+// ---------------------------------------------------------------------------
+// Combo (FA-15): clustered columns and line series with markers in one plot. Core's resolveChartData orders the series
+// (column series first, then lines) and says which lines use the secondary value axis. That axis sits at the right (the left,
+// right to left) with its own scale and its tick labels in the first secondary series' number format; the gridlines follow
+// the primary axis, whose ticks take the first column series' format. The PPTX export writes the same plan natively.
+
+/** The combo plan of a chart: core's, or (a core without it) every series a column except the last, a line, all on the primary axis. */
+function comboPlan(c, series) {
+  if (Array.isArray(c.combo) && c.combo.length === series.length) return c.combo;
+  return series.map((_, index) => ({ role: series.length > 1 && index === series.length - 1 ? "line" : "bar", axis: "primary" }));
+}
+
+/** Legend entries in series order: a square key for a column series, a line with a marker for a line series. */
+function comboLegendEntries(c, series) {
+  const plan = comboPlan(c, series);
+  return series.map((s, index) => ({ name: s.name, color: c.colors[s.index % c.colors.length], path: `${c.path}.data.columns.${s.column}`, ...(plan[index].role === "line" ? { key: "line", marker: true } : {}) }));
+}
+
+function renderComboChart(c, spec) {
+  const { box, pad, fontPx } = c;
+  const series = c.series();
+  const plan = comboPlan(c, series);
+  const bars = series.filter((_, index) => plan[index].role === "bar");
+  const lines = series.filter((_, index) => plan[index].role === "line");
+  const onSecondary = (s) => plan[s.index].axis === "secondary";
+  const primaryLines = lines.filter((s) => !onSecondary(s)), secondaryLines = lines.filter(onSecondary);
+  const categories = c.rows.map((row) => c.label(row[0]));
+  const count = categories.length;
+  // Right to left (RR-05): the categories run from the right, the primary value axis moves to the right and the secondary one to the left.
+  const rtl = c.bound.geometry?.direction === "rtl";
+  const categorySlot = (i) => rtl ? count - 1 - i : i;
+  const extent = (list) => {
+    const values = list.flatMap((s) => s.values).filter((value) => value !== null);
+    return values.length ? [Math.min(...values), Math.max(...values)] : [0, 1];
+  };
+  const [primaryMin, primaryMax] = extent([...bars, ...primaryLines]);
+  const [secondaryMin, secondaryMax] = extent(secondaryLines);
+  const primaryFormat = (bars[0] ?? primaryLines[0])?.format, secondaryFormat = secondaryLines[0]?.format;
+  // The default legend sits at the far right, outside a right axis title (the secondary axis title, or right to left the primary
+  // one), as PowerPoint places it: the legend is laid out against the box before the title band was carved, and the title moves in.
+  const rightTitle = c.axisTitleBands?.some((band) => band.side === "right") && !c.legendManaged;
+  let legendWidth = 0;
+  if (series.length > 1) {
+    const inner = c.box;
+    if (rightTitle) c.box = { ...inner, width: inner.width + c.lineHeight };
+    legendWidth = legendEntries(c, comboLegendEntries(c, series));
+    c.box = inner;
+    if (rightTitle) c.axisTitleRightInset = legendWidth + c.pad / 2;
+  }
+  const right = box.x + box.width - pad - legendWidth;
+  const top = box.y + pad + c.lineHeight / 2;
+  const entries = categories.map((name, i) => ({ name, path: `${c.path}.data.rows.${i}.0` }));
+  if (rtl) entries.reverse();
+  const tickWidthOf = (scale, format) => Math.max(...scale.ticks.map((tick) => c.width(formatTick(tick, false, format)))) + fontPx * 0.5;
+  const axis = planCategoryAxis(c, entries, (reserve) => {
+    const height = Math.max(1, box.y + box.height - pad - reserve - top);
+    const intervals = maxIntervalsFor(height, c.lineHeight * 1.2);
+    const scale = niceScale(primaryMin, primaryMax, intervals);
+    const secondary = secondaryLines.length ? niceScale(secondaryMin, secondaryMax, intervals) : null;
+    const primaryWidth = tickWidthOf(scale, primaryFormat), secondaryWidth = secondary ? tickWidthOf(secondary, secondaryFormat) : 0;
+    const leftWidth = rtl ? secondaryWidth : primaryWidth, rightWidth = rtl ? primaryWidth : secondaryWidth;
+    const x = box.x + pad + (leftWidth || fontPx / 2);
+    const plotRight = right - (rightWidth || fontPx / 2);
+    return { scale, secondary, primaryWidth, secondaryWidth, plot: { x, y: top, width: Math.max(1, plotRight - x), height } };
+  });
+  const { plot, scale, secondary } = axis;
+  drawBottomLabels(c, axis.plan, plot, entries);
+  c.plotArea = plot;
+  const valueAt = (axisScale) => (value) => plot.y + axisFraction(value, axisScale, true) * plot.height;
+  const at = valueAt(scale), atSecondary = secondary ? valueAt(secondary) : at;
+  const crossing = at(Math.min(scale.max, Math.max(scale.min, 0)));
+  const tickLabel = (label, position, side, width) => side === "left"
+    ? c.text(label, { x: box.x + pad, y: position - c.lineHeight / 2, width: Math.max(1, plot.x - box.x - pad - fontPx * 0.35), height: c.lineHeight }, c.path, "right")
+    : c.text(label, { x: plot.x + plot.width + fontPx * 0.35, y: position - c.lineHeight / 2, width: Math.max(1, width - fontPx * 0.35), height: c.lineHeight }, c.path, "left");
+  for (const tick of scale.ticks) {
+    const position = at(tick);
+    gridline(c, plot.x, position, plot.x + plot.width, position);
+    tickLabel(formatTick(tick, false, primaryFormat), position, rtl ? "right" : "left", axis.primaryWidth);
+  }
+  if (secondary) for (const tick of secondary.ticks) tickLabel(formatTick(tick, false, secondaryFormat), atSecondary(tick), rtl ? "left" : "right", axis.secondaryWidth);
+  const band = plot.width / count;
+  // Column series come first in core's order, so a column's palette index is its series index.
+  if (bars.length) drawBars(c, spec, bars, stackCategoryValues(bars, count, "bar", "clustered", c.path), { plot, band, at, horizontal: false, scale, categorySlot });
+  const point = (s, i, value) => [plot.x + (categorySlot(i) + 0.5) * band, (onSecondary(s) ? atSecondary : at)(value)];
+  const radius = 3 * c.pt;
+  for (const s of lines) {
+    const color = c.colors[s.index % c.colors.length];
+    let run = [];
+    const flush = () => {
+      if (run.length > 1) c.mark("polyline", { points: run.map(([x, y]) => `${c.num(x)},${c.num(y)}`).join(" "), fill: "none", stroke: color, "stroke-width": 2 * c.pt, "stroke-linejoin": "round", "stroke-linecap": "round" }, `${c.path}.data.columns.${s.column}`);
+      run = [];
+    };
+    s.values.forEach((value, i) => { if (value === null) flush(); else run.push(point(s, i, value)); });
+    flush();
+    s.values.forEach((value, i) => {
+      if (value === null) return;
+      const [cx, cy] = point(s, i, value);
+      c.mark("circle", { cx, cy, r: radius, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
+    });
+  }
+  // Line labels sit beside each point at the combo's line position (core: above unless a point position was asked for).
+  if (c.dataLabels) for (const s of lines) s.values.forEach((value, i) => {
+    if (value === null) return;
+    const category = c.rows[i][0] === null || c.rows[i][0] === undefined ? "" : String(c.rows[i][0]);
+    drawPointLabel(c, labelString(c, { category, value, format: s.format }), point(s, i, value), `${c.path}.data.rows.${i}.${s.column}`, c.dataLabels.linePosition ?? "above");
+  });
+  const primaryX = rtl ? plot.x + plot.width : plot.x, secondaryX = rtl ? plot.x : plot.x + plot.width;
+  axisLine(c, primaryX, plot.y, primaryX, plot.y + plot.height);
+  if (secondary) axisLine(c, secondaryX, plot.y, secondaryX, plot.y + plot.height);
+  axisLine(c, plot.x, crossing, plot.x + plot.width, crossing);
+}
+
 // ---------------------------------------------------------------------------
 // Pie and doughnut: first series only, clockwise from 12 o'clock, one colour per category.
 
@@ -916,7 +1003,7 @@ function renderCircularChart(c, spec) {
   const categories = c.rows.map((row) => c.label(row[0]));
   const values = c.rows.map((row) => Math.abs(chartNumber(row[1]) ?? 0));
   const legendWidth = legendEntries(c, categories.map((name, i) => ({
-    name, color: c.colors[i % c.colors.length], path: `${c.path}.data.rows.${i}.0`
+    name, color: sliceColor(c, i), path: `${c.path}.data.rows.${i}.0`
   })));
   const area = { x: box.x + pad, y: box.y + pad, width: Math.max(1, box.width - 2 * pad - legendWidth), height: Math.max(1, box.height - 2 * pad) };
   const cx = area.x + area.width / 2, cy = area.y + area.height / 2;
@@ -936,7 +1023,7 @@ function renderCircularChart(c, spec) {
   let angle = -Math.PI / 2;
   values.forEach((value, i) => {
     const delta = value / total * Math.PI * 2, end = angle + delta;
-    const fill = c.colors[i % c.colors.length], path = `${c.path}.data.rows.${i}.1`;
+    const fill = sliceColor(c, i), path = `${c.path}.data.rows.${i}.1`;
     if (delta >= Math.PI * 2 - 1e-9) {
       if (inner) c.mark("path", { d: `${circlePath(c, cx, cy, r)} ${circlePath(c, cx, cy, inner)}`, fill, "fill-rule": "evenodd", ...border }, path);
       else c.mark("circle", { cx, cy, r, fill, ...border }, path);
@@ -949,7 +1036,7 @@ function renderCircularChart(c, spec) {
     let start = -Math.PI / 2;
     values.forEach((value, i) => {
       const delta = value / total * Math.PI * 2;
-      if (delta > 0) drawSliceLabel(c, sliceTexts[i], { cx, cy, r, inner, mid: start + delta / 2 }, `${c.path}.data.rows.${i}.1`, c.colors[i % c.colors.length]);
+      if (delta > 0) drawSliceLabel(c, sliceTexts[i], { cx, cy, r, inner, mid: start + delta / 2 }, `${c.path}.data.rows.${i}.1`, sliceColor(c, i));
       start += delta;
     });
   }
@@ -1020,10 +1107,10 @@ function renderScatterChart(c) {
   const yCross = yAt(Math.min(yScale.max, Math.max(yScale.min, 0))), xCross = xAt(Math.min(xScale.max, Math.max(xScale.min, 0)));
   axisLine(c, xCross, plot.y, xCross, plot.y + plot.height);
   axisLine(c, plot.x, yCross, plot.x + plot.width, yCross);
-  series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length];
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j);
     for (const point of s.points) c.mark("circle", { cx: xAt(point.x), cy: yAt(point.y), r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${point.row}.${s.column}`);
-  });
+  }
   // RR-35: a scatter label shows the Y value, and the X value as its category.
   if (c.dataLabels) series.forEach((s) => {
     for (const point of s.points) drawPointLabel(c, labelString(c, { category: formatChartValue(point.x, xFormat), value: point.y, format: s.format }), [xAt(point.x), yAt(point.y)], `${c.path}.data.rows.${point.row}.${s.column}`);
@@ -1092,12 +1179,12 @@ function renderRadarChart(c, spec) {
     c.text(text, rect, label.path, align);
   });
   reportTruncatedLabels(c, truncated);
-  series.forEach((s, j) => {
-    const color = c.colors[j % c.colors.length], path = `${c.path}.data.columns.${s.column}`;
+  for (let j = 0; j < series.length; j++) {
+    const s = series[j], color = seriesColor(c, j), path = `${c.path}.data.columns.${s.column}`;
     if (spec.style === "filled") {
       const outline = s.values.map((v, i) => point(i, v ?? scale.min).map(n).join(" "));
       c.mark("path", { d: `M ${outline.join(" L ")} Z`, fill: color }, path);
-      return;
+      continue;
     }
     const at = (i) => point(i, s.values[i]).map(n).join(" ");
     let d = "";
@@ -1112,7 +1199,7 @@ function renderRadarChart(c, spec) {
       const [x, y] = point(i, v);
       c.mark("circle", { cx: x, cy: y, r: 3 * c.pt, fill: color, stroke: color, "stroke-width": 0.75 * c.pt }, `${c.path}.data.rows.${i}.${s.column}`);
     });
-  });
+  }
   // Value axis labels sit on top of filled series, as in PowerPoint.
   for (const tick of scale.ticks) {
     const label = formatTick(tick, false, valueFormat), width = c.width(label) + fontPx * 0.5;