diff --git a/changelog.d/highcharts-13.md b/changelog.d/highcharts-13.md new file mode 100644 index 00000000000..29d845c5e99 --- /dev/null +++ b/changelog.d/highcharts-13.md @@ -0,0 +1,14 @@ +### Changed + +- **Highcharts renders with 13.1.1 instead of 12.6.0.** The JavaScript render + harness pins the latest 13.x release, which also carries the fixes for the + 2026-09 core security advisories (prototype pollution through `series.keys`, + `javascript:` URLs in `credits.href` and exported markup). The generator + prompt now pins `palette: { colorScheme: t.theme }`, because Highcharts 13 + takes every default color from CSS variables that otherwise follow the + viewer's OS dark-mode setting in the interactive HTML. It also covers the + 13.x changes a before/after render of all 323 Highcharts implementations + surfaced: the `dataLabels.distance` gap, legend symbols that take + `series.opacity`, near-black default outlines in the dark theme, and the + cropping of unsorted line data. Existing implementations stay as they are, + and regeneration refreshes them. (#12246) diff --git a/package-lock.json b/package-lock.json index db758a55f2e..ae09298e0a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "chart.js": "4.4.7", "d3": "7.9.0", "echarts": "6.1.0", - "highcharts": "12.6.0", + "highcharts": "13.1.1", "react": "18.3.1", "react-dom": "18.3.1" }, @@ -2083,9 +2083,9 @@ } }, "node_modules/highcharts": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.6.0.tgz", - "integrity": "sha512-zWwoXECOakJT2huBMqIZOjDNLLgyZFCcfZqTj2g6cvYOGxjF3nvooC+rIaF5aKiharluyGKNflfRNrzOAIjdRg==", + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-13.1.1.tgz", + "integrity": "sha512-k/smhxCgaqHDsuy9ZCWs8FJNTPrbzc8BmMA4M/8f9JMwv9HgmNZjulyWwZ9q9ly6AzHpskL9mhlW8vgsSqnstg==", "license": "https://www.highcharts.com/license", "peerDependencies": { "jspdf": "^4.1.0", diff --git a/package.json b/package.json index 6689d9869cc..cf94bddce99 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "chart.js": "4.4.7", "d3": "7.9.0", "echarts": "6.1.0", - "highcharts": "12.6.0", + "highcharts": "13.1.1", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/prompts/library/highcharts.md b/prompts/library/highcharts.md index 86b908ef60d..6ee355af3c3 100644 --- a/prompts/library/highcharts.md +++ b/prompts/library/highcharts.md @@ -7,7 +7,7 @@ JavaScript** library — the file extension is **`.js`** and the runtime is the **browser render harness** (`node automation/js-render/render.mjs`), **not** Python (`highcharts-core`), Rscript, or julia. -**API level:** Highcharts 12. The root `package-lock.json` pins this major; +**API level:** Highcharts 13. The root `package-lock.json` pins this major; write against its API. > **Commercial license — keep it visible.** Highcharts is free for personal / @@ -124,9 +124,21 @@ Map tokens onto the chart chrome. The `#container` background is already `t.pageBg`, so set `chart.backgroundColor: "transparent"` (the page shows through) — **never white**. Always disable the credits watermark. +**Pin the color scheme: `palette: { colorScheme: t.theme }`.** Since +Highcharts 13, every color you leave at its default (marker outlines, +column/pie borders, tooltip, any text you do not style) comes from the +`palette` CSS variables, and the default `colorScheme: "light dark"` follows +the *viewer's* OS dark-mode setting. Unpinned, `plot-light.html` opened on a +dark-mode machine draws dark borders and a dark tooltip on the light page. +In the dark theme those defaults are Highcharts' own dark background +(`#141414`), so a default marker outline or column border is near-black there: +set `marker.lineColor` / `borderColor` from the tokens wherever the outline +itself carries data (censor ticks, custom `line`-style marker symbols). + ```js const t = window.ANYPLOT_TOKENS; Highcharts.chart("container", { + palette: { colorScheme: t.theme }, // "light" | "dark"; never the OS setting chart: { type: "column", backgroundColor: "transparent", animation: false, style: { fontFamily: "inherit" } }, credits: { enabled: false }, @@ -163,6 +175,7 @@ const values = [12, 19, 7, 15, 11]; // --- Chart ----------------------------------------------------------------- Highcharts.chart("container", { + palette: { colorScheme: t.theme }, chart: { type: "column", backgroundColor: "transparent", animation: false, style: { fontFamily: "inherit" } }, credits: { enabled: false }, @@ -230,3 +243,21 @@ on its own line. - Highcharts renders SVG (the harness's draw check passes on ``); you may set `window.__anyplotReady = true` after the chart call for precise timing, but with `animation: false` the harness's fonts-ready + double-rAF settle is enough. +- **Data-label gap is `dataLabels.distance`** (Highcharts 13, default 4 px): + `padding` no longer pushes the label off its point or column. Set `distance` + for the gap; keep `x` / `y` for deliberate offsets. +- **`dataSorting` is not available**: since Highcharts 13 it lives in + `modules/data-sorting.js`, which is not loaded. Sort the data array yourself. +- **`stackLabels` formatters:** `this.isNegative` was removed in 13.1; test + `this.total < 0` instead. +- **`useHTML` content sits in a `
`** (Highcharts 13, was a ``), so + inline-flow layout tricks shift; style the inner markup explicitly. Keep + rotated labels as SVG text: rotated `useHTML` labels log invalid + `foreignObject` transforms in 13.1. +- **Legend symbols take `series.opacity`** (Highcharts 13, column-type series): + a legend-only proxy series hidden with `opacity: 0` shows an empty legend key. + Hide a proxy with `color: "transparent"` plus `legendSymbolColor: `. +- **Unsorted line data needs `cropThreshold: Infinity`.** A `line` series whose + x values are not ascending (null-separated paths, contours, graticules) is + cropped by x range once it exceeds 300 points, which silently drops segments; + Highcharts 13 drops different ones than 12 did.