feat(highcharts): add Highcharts rendering backend

.github/extensions/flint-chart/skills/flint-chart-author/SKILL.md

@@ -10,7 +10,7 @@ description: "Use when: the user asks to make or render charts with flint-chart,
 Your output is the **spec**: the `chart_spec` and `semantic_types` of a
 `ChartAssemblyInput`. You reference data columns **by name**. The host
 passes the resulting input to `assembleVegaLite`, `assembleECharts`,
-or `assembleChartjs` to get a backend spec.
+`assembleChartjs`, or `assembleHighcharts` to get a backend spec.
 
 **You write the input spec, not the output spec.** And critically:
 
@@ -83,16 +83,18 @@ npm install flint-chart
 npm install vega vega-lite vega-embed  # browser Vega-Lite rendering
 npm install echarts                    # ECharts rendering
 npm install chart.js                   # Chart.js rendering
+npm install highcharts                 # Highcharts rendering
 ```
 
 Then compile with the requested backend:
 
 ```ts
-import { assembleChartjs, assembleECharts, assembleVegaLite } from 'flint-chart';
+import { assembleChartjs, assembleECharts, assembleHighcharts, assembleVegaLite } from 'flint-chart';
 
 const vegaLiteSpec = assembleVegaLite(input);
 const echartsOption = assembleECharts(input);
 const chartjsConfig = assembleChartjs(input);
+const highchartsOption = assembleHighcharts(input);
 ```
 
 Python support is planned for a later release. Until the PyPI package is
@@ -139,7 +141,7 @@ Use the binding mode that matches the runtime. Do not mix them.
 3. **Generated application or notebook code: bind runtime variables.** If the
   user asks you to add Flint to code, write normal data-loading code first and
   pass a real runtime value, e.g. `data: { values: rows }`, to
-  `assembleVegaLite`, `assembleECharts`, or `assembleChartjs`. This variable
+  `assembleVegaLite`, `assembleECharts`, `assembleChartjs`, or `assembleHighcharts`. This variable
   pattern is for generated code, not for MCP tool calls.
   - Parse CSV with a real parser (`d3.csvParse`, Papa Parse, `pandas`), never
     `line.split(',')`: quoted values such as `"Korea, Rep."` shift every later
@@ -420,6 +422,8 @@ support a subset (verify if targeting a non-VL backend):
 - **Chart.js** supports: Scatter, Bubble, Bar, Grouped Bar, Stacked Bar,
   Lollipop, Bump, Combo, Line, Area, Range Area, Pie, Doughnut, Histogram,
   Radar, Rose, Slope, Connected Scatter.
+- **Highcharts** supports: Scatter Plot, Bar, Grouped Bar, Stacked Bar,
+  Line, Area, Pie, Doughnut, Histogram, Radar, Heatmap, Waterfall, Sunburst.
 
 You do not need to call the library or inspect its source to author the
 input — pick from this table.

CHANGELOG.md

@@ -114,6 +114,14 @@ Released together for `flint-chart`, `flint-chart-mcp`, and the Copilot Canvas p
   `semantic_types` labels surface as `unknown_semantic_type` warnings, and
   `isRegistered` / `getRegisteredTypes` are exported from `flint-chart/core`
   ([#104](https://github.com/microsoft/flint-chart/issues/104)).
+- Highcharts backend. The same Flint input compiles to a Highcharts
+  `option` via `assembleHighcharts(input)` (also from the new
+  `flint-chart/highcharts` subpath): bar, stacked bar, grouped bar,
+  line, area, pie, doughnut, scatter, histogram, and radar templates
+  with native series types, datetime axes, and per-panel faceting
+  (`_facet`). `validateChart` accepts `highcharts`, and the MCP
+  server and site editor render it. Guide:
+  `docs/reference-highcharts.md`.
 - `<FlintChart>` from the new `flint-chart/react` subpath (React is an
   optional peer dependency). `spec` takes the `ChartAssemblyInput` with its
   `interaction_spec`; `interactions` takes preset factories, as an array added

README.md

@@ -25,7 +25,7 @@ for building interactive applications.
 
 Flint supports **52 chart types across 5 rendering backends** —
 [Vega-Lite](https://vega.github.io/vega-lite/), [ECharts](https://echarts.apache.org/),
-[Chart.js](https://www.chartjs.org/), [Plotly](https://plotly.com/javascript/), and
+[Chart.js](https://www.chartjs.org/), [Highcharts](https://www.highcharts.com/), [Plotly](https://plotly.com/javascript/), and
 native Excel charts — through one unified interface, with **14 themes and 23
 interaction presets**. To create bespoke visualizations, design custom themes in
 the [Theme Lab](https://microsoft.github.io/flint-chart/#/theme-lab) and build
@@ -236,8 +236,8 @@ and read the [interaction spec](docs/interaction-spec.md) and
 - [Project site](https://microsoft.github.io/flint-chart/) — gallery, live editor, themes, and interactions
 - [API reference](docs/api-reference.md) and backend references for
   [Vega-Lite](docs/reference-vegalite.md), [ECharts](docs/reference-echarts.md),
-  [Chart.js](docs/reference-chartjs.md), [Plotly](docs/reference-plotly.md), and
-  [Excel](docs/reference-excel.md)
+  [Chart.js](docs/reference-chartjs.md), [Highcharts](docs/reference-highcharts.md),
+  [Plotly](docs/reference-plotly.md), and [Excel](docs/reference-excel.md)
 - [Theme guide](docs/theme-spec.md), [interaction spec](docs/interaction-spec.md),
   and [interaction programming API](docs/interaction-api.md)
 - [MCP server guide](https://microsoft.github.io/flint-chart/#/mcp) and
@@ -283,6 +283,7 @@ flint-chart/
 │   │       ├── vegalite/     Vega-Lite backend
 │   │       ├── echarts/      ECharts backend
 │   │       ├── chartjs/      Chart.js backend
+│   │       ├── highcharts/   Highcharts backend
 │   │       ├── plotly/       Plotly backend
 │   │       ├── excel/        native Excel backend
 │   │       └── test-data/    fixtures and stress-test generators

agent-skills/flint-chart-author/SKILL.md

@@ -10,7 +10,7 @@ description: "Use when: the user asks to make or render charts with flint-chart,
 Your output is the **spec**: the `chart_spec` and `semantic_types` of a
 `ChartAssemblyInput`. You reference data columns **by name**. The host
 passes the resulting input to `assembleVegaLite`, `assembleECharts`,
-or `assembleChartjs` to get a backend spec.
+`assembleChartjs`, or `assembleHighcharts` to get a backend spec.
 
 **You write the input spec, not the output spec.** And critically:
 
@@ -83,16 +83,18 @@ npm install flint-chart
 npm install vega vega-lite vega-embed  # browser Vega-Lite rendering
 npm install echarts                    # ECharts rendering
 npm install chart.js                   # Chart.js rendering
+npm install highcharts                 # Highcharts rendering
 ```
 
 Then compile with the requested backend:
 
 ```ts
-import { assembleChartjs, assembleECharts, assembleVegaLite } from 'flint-chart';
+import { assembleChartjs, assembleECharts, assembleHighcharts, assembleVegaLite } from 'flint-chart';
 
 const vegaLiteSpec = assembleVegaLite(input);
 const echartsOption = assembleECharts(input);
 const chartjsConfig = assembleChartjs(input);
+const highchartsOption = assembleHighcharts(input);
 ```
 
 Python support is planned for a later release. Until the PyPI package is
@@ -139,7 +141,7 @@ Use the binding mode that matches the runtime. Do not mix them.
 3. **Generated application or notebook code: bind runtime variables.** If the
   user asks you to add Flint to code, write normal data-loading code first and
   pass a real runtime value, e.g. `data: { values: rows }`, to
-  `assembleVegaLite`, `assembleECharts`, or `assembleChartjs`. This variable
+  `assembleVegaLite`, `assembleECharts`, `assembleChartjs`, or `assembleHighcharts`. This variable
   pattern is for generated code, not for MCP tool calls.
   - Parse CSV with a real parser (`d3.csvParse`, Papa Parse, `pandas`), never
     `line.split(',')`: quoted values such as `"Korea, Rep."` shift every later
@@ -420,6 +422,8 @@ support a subset (verify if targeting a non-VL backend):
 - **Chart.js** supports: Scatter, Bubble, Bar, Grouped Bar, Stacked Bar,
   Lollipop, Bump, Combo, Line, Area, Range Area, Pie, Doughnut, Histogram,
   Radar, Rose, Slope, Connected Scatter.
+- **Highcharts** supports: Scatter Plot, Bar, Grouped Bar, Stacked Bar,
+  Line, Area, Pie, Doughnut, Histogram, Radar, Heatmap, Waterfall, Sunburst.
 
 You do not need to call the library or inspect its source to author the
 input — pick from this table.

docs/DEVELOPMENT.md

@@ -40,6 +40,7 @@ flint-chart/
 │   │   ├── src/vegalite/  Vega-Lite backend
 │   │   ├── src/echarts/   ECharts backend
 │   │   ├── src/chartjs/   Chart.js backend
+│   │   ├── src/highcharts/ Highcharts backend
 │   │   └── src/test-data/ gallery fixtures
 │   ├── flint-py/          Python port preview (PyPI package planned later)
 │   └── flint-mcp/         npm package `flint-chart-mcp`

docs/README.md

@@ -727,7 +727,7 @@ Abstract channel for two distinct visual mappings:
 ### `ChannelSemantics`
 
 Phase 0 output for a single channel. Combines user input with resolved
-decisions. This is the central IR — all four backends read the same
+decisions. This is the central IR — all five backends read the same
 `ChannelSemantics` record.
 
 ```typescript
@@ -1052,7 +1052,7 @@ value sort when the largest or smallest categories should be retained.
 
 | File | Lines | Role |
 |------|-------|------|
-| `index.ts` | 60 | Public API re-exports (all 4 backends) |
+| `index.ts` | 60 | Public API re-exports (all 5 backends) |
 
 **Total: ~21,000 lines** across 87 `.ts` files (excluding test-data).
 

docs/adding-a-chart-template.md

@@ -35,7 +35,7 @@ Pick only the channels the mark actually uses. Copy a similar template as a star
 
 A new chart that is a variant of an existing one should look like it. Reuse the sibling's mark definition and properties (export them from the sibling's file), or call the sibling's `instantiate` on a unit of your own spec, so a theme and a reader see one family. The Ridgeline Plot draws its bands as the Range Area Chart does; the Marginal Plot builds its plot with the Scatter Plot's, Strip Plot's or Heatmap's `instantiate`, by the axis types, and its margins with the Density Plot's, Histogram's, Boxplot's or Bar Chart's.
 
-ECharts, Chart.js and Plotly use the same `ChartTemplateDef` interface under their own `templates/` folders.
+ECharts, Chart.js, Plotly, and Highcharts use the same `ChartTemplateDef` interface under their own `templates/` folders.
 
 ---
 
@@ -178,6 +178,7 @@ Review formatting, layout stretch, legends and facet behaviour across 3–6 repr
 
 # §7 Wire the site, docs and agent skill
 
+The user-facing contract is that the same `chartType` string should work across `assembleVegaLite`, `assembleECharts`, `assembleChartjs`, `assemblePlotly`, and `assembleHighcharts` **when templates exist**.
 Nothing below is read from the registry, so each needs a line:
 
 | Where | What |

docs/api-reference.md

@@ -59,13 +59,15 @@ import {
   assembleVegaLite,
   assembleECharts,
   assembleChartjs,
+  assembleHighcharts,
   assemblePlotly,
   assembleExcel,
 } from 'flint-chart';
 
 const vlSpec  = assembleVegaLite(input);
 const ecSpec  = assembleECharts(input);
 const cjsSpec = assembleChartjs(input);
+const hcSpec  = assembleHighcharts(input);
 const plFig   = assemblePlotly(input);
 const xlSpec  = assembleExcel(input);
 ```
@@ -75,10 +77,11 @@ const xlSpec  = assembleExcel(input);
 | `assembleVegaLite` | Vega-Lite JSON spec |
 | `assembleECharts` | ECharts `option` object |
 | `assembleChartjs` | Chart.js configuration |
+| `assembleHighcharts` | Highcharts `option` object |
 | `assemblePlotly` | Plotly.js `{ data, layout }` figure |
 | `assembleExcel` | Native Excel chart artifact for Office.js |
 
-If a backend does not support a `chartType`, the assembler throws before render. Check support with `vlGetTemplateDef`, `ecGetTemplateDef`, `cjsGetTemplateDef`, `plGetTemplateDef`, or `excelGetTemplateDef`.
+If a backend does not support a `chartType`, the assembler throws before render. Check support with `vlGetTemplateDef`, `ecGetTemplateDef`, `cjsGetTemplateDef`, `hcGetTemplateDef`, `plGetTemplateDef`, or `excelGetTemplateDef`.
 
 ## Excel runtime and code generation
 
@@ -428,7 +431,7 @@ const result = validateChart(input, 'vegalite', { updates });
 | `validateSemanticTypes(semantic_types)` | `unknown_semantic_type` warnings for labels not in the type registry (also included by `validateChart`) |
 | `assembleForBackend(backend, input, options?)` | Assemble and split out `_warnings` / `_width` / `_height` |
 | `stripPrivateKeys(spec)` | Remove Flint's `_`-prefixed metadata from a spec |
-| `VALIDATION_BACKENDS` | Runtime list of accepted backends (`vegalite`, `echarts`, `chartjs`, `plotly`) |
+| `VALIDATION_BACKENDS` | Runtime list of accepted backends (`vegalite`, `echarts`, `chartjs`, `highcharts`, `plotly`) |
 
 `options.maxDataRows` (default 100,000) and `options.maxCanvasDim` (default
 4000) cap input size. Inline `data.values` are required — resolve `data.url`
@@ -467,6 +470,7 @@ Inspect `_warnings` or `ChartWarning` arrays in integration code to surface trun
 | `flint-chart/vegalite` | VL templates and `assembleVegaLite` |
 | `flint-chart/echarts` | ECharts templates and `assembleECharts` |
 | `flint-chart/chartjs` | Chart.js templates and `assembleChartjs` |
+| `flint-chart/highcharts` | Highcharts templates and `assembleHighcharts` |
 | `flint-chart/validate` | `validateChart` and input validation helpers |
 | `flint-chart/interactive` | `mountChart`, interaction presets, update helpers |
 | `flint-chart/react` | `<FlintChart>` component (React is an optional peer dependency) |

docs/architecture.md

@@ -39,10 +39,10 @@ Most design logic lives in Stages 1–2 and is identical across backends.
 |-------|------------|----------------|-------------|
 | **1. Compiler frontend** | Resolve semantic context | Phase 0 — `resolveChannelSemantics()` | `ChannelSemantics` per channel |
 | **2. Optimizer** | Fit layout to canvas | Phase 1 — `computeLayout()`, `filterOverflow()` | `LayoutResult`, truncated data |
-| **3. Code generator** | Emit backend-native output | Phase 2 — `build*Encodings()`, `template.instantiate()` | VL / EC / CJS / Plotly spec or Excel artifact |
+| **3. Code generator** | Emit backend-native output | Phase 2 — `build*Encodings()`, `template.instantiate()` | VL / EC / CJS / Highcharts / Plotly spec or Excel artifact |
 
 ```text
-assembleVegaLite(input)   // or assembleECharts, assembleChartjs, assemblePlotly, assembleExcel
+assembleVegaLite(input)   // or assembleECharts, assembleChartjs, assembleHighcharts, assemblePlotly, assembleExcel
        │
        ▼
 ══ STAGE 1 — COMPILER FRONTEND (core/) ═════════════════════════
@@ -199,6 +199,7 @@ packages/flint-js/src/
 ├── vegalite/       Stage 3 — Vega-Lite templates + assembleVegaLite
 ├── echarts/        Stage 3 — ECharts templates + assembleECharts
 ├── chartjs/        Stage 3 — Chart.js templates + assembleChartjs
+├── highcharts/     Stage 3 — Highcharts templates + assembleHighcharts
 ├── excel/          Stage 3 — native Excel chart planning + Office.js generation
 └── test-data/      gallery fixtures (TEST_GENERATORS)
 

docs/overview.md

@@ -1,6 +1,6 @@
 # Overview
 
-**Flint** is a semantics-driven intermediate language (IL) for data visualization. You declare what each field *means* and the chart you want; the compiler derives scales, axes, aggregation, formatting, layout, and color, then emits Vega-Lite, ECharts, Chart.js, Plotly, or a native Excel chart artifact.
+**Flint** is a semantics-driven intermediate language (IL) for data visualization. You declare what each field *means* and the chart you want; the compiler derives scales, axes, aggregation, formatting, layout, and color, then emits Vega-Lite, ECharts, Chart.js, Highcharts, Plotly, or a native Excel chart artifact.
 
 If you're new to Flint, start with [Getting started](/documentation/getting-started), then come back here for the architecture and API map.
 
@@ -105,6 +105,7 @@ Semantic types use a three-level hierarchy. Details: [Semantic Type](/documentat
 | `assembleVegaLite(input)` | Vega-Lite v6 spec |
 | `assembleECharts(input)` | ECharts `option` |
 | `assembleChartjs(input)` | Chart.js config |
+| `assembleHighcharts(input)` | Highcharts `option` |
 
 The same input compiles to every supported backend. Stages 1–2 (semantics + layout) live in shared `core/`; only Stage 3 (template instantiation) is library-specific.
 
@@ -135,7 +136,7 @@ Pipeline detail: [Architecture](/documentation/architecture).
 | Section | Pages |
 |---------|-------|
 | **Language design** | [Architecture](/documentation/architecture), [Semantic Type](/documentation/semantic-types), [Auto Layout Algorithm](/documentation/layout-model), [API reference](/documentation/api-reference) |
-| **Chart reference** | [Vega-Lite charts](/documentation/reference-vegalite), [ECharts charts](/documentation/reference-echarts), [Chart.js charts](/documentation/reference-chartjs), [Plotly charts](/documentation/reference-plotly), [Excel charts](/documentation/reference-excel) |
+| **Chart reference** | [Vega-Lite charts](/documentation/reference-vegalite), [ECharts charts](/documentation/reference-echarts), [Chart.js charts](/documentation/reference-chartjs), [Highcharts charts](/documentation/reference-highcharts), [Plotly charts](/documentation/reference-plotly), [Excel charts](/documentation/reference-excel) |
 | **Development** | [Development guide](/documentation/development), [Extending semantic types](/documentation/adding-a-semantic-type), [Extending backends](/documentation/adding-a-backend), [Extending chart templates](/documentation/adding-a-chart-template) |
 
 ---