https://framer.com/m/HighChart-7l86rC.js
HighchartsX
HighchartsX draws any of 48 Highcharts chart types from a single JSON payload — categorical, ranged, flow, hierarchy, financial — with every colour taken from the project’s dataviz tokens.
Examples
Twenty-five live charts — one minimal payload, then six in each of the four families. Every one is the same component driven by its own JSON schema; nothing on this page falls back to a built-in example. The four charts under Schema print their payloads in full.
One series
The smallest payload that draws something: a type, one series, and the categories it runs along. Every other chart on this page is the same component with a longer payload.
Categorical
The everyday shapes: a series over categories, a part-to-whole, a cloud. Twenty-three of the forty-eight sit in this family.
line
area
bar
scatter
pie
wordcloud
Ranges and distribution
Each point carries a low and a high, or a whole distribution. Eleven types work this way.
arearange
columnrange
boxplot
errorbar (on a column base)
histogram
bellcurve
Flow and hierarchy
Relationships rather than values: what moves where, and what contains what.
sankey
dependencywheel
arcdiagram
organization
treemap
sunburst
Financial, gauges and maps
Open-high-low-close, single readings against a scale, and value laid out on a grid.
candlestick
ohlc
waterfall
gauge
solidgauge
heatmap
Schema
A schema is the whole chart as one JSON payload: type, titles, axes, series and formatting. While one is set it overrides the Type, Title and Legend controls in the panel. Colours are never in it — they resolve from the dataviz tokens either way. The four payloads below are printed under their charts; the numbers are sample data.
Two series, stacked, with an axis title and a tooltip suffix
{"version":"1.0","type":"column","title":"Component inserts by layer","subtitle":"Sample data, 2026","legend":true,"xAxis":{"categories":["Q1","Q2","Q3","Q4"]},"yAxis":{"title":{"text":"Inserts"}},"tooltip":{"valueSuffix":" inserts","shared":true},"plotOptions":{"series":{"stacking":"normal"}},"series":[{"name":"UI Basics","data":[820,910,1040,1180]},{"name":"Enhancements","data":[430,520,610,740]}]}
A datetime x-axis: every point is an [epoch ms, value] pair
{"version":"1.0","type":"line","title":"Dark theme overtook light in April","subtitle":"Sample data, share of sessions","legend":true,"xAxis":{"type":"datetime","title":{"text":null}},"yAxis":{"min":0,"max":100,"title":{"text":"Share of sessions (%)"}},"tooltip":{"valueSuffix":"%","valueDecimals":0,"shared":true},"series":[{"name":"Dark","data":[[1767225600000,38],[1769904000000,41],[1772323200000,47],[1775001600000,53],[1777593600000,58],[1780272000000,61]]},{"name":"Light","data":[[1767225600000,62],[1769904000000,59],[1772323200000,53],[1775001600000,47],[1777593600000,42],[1780272000000,39]]}]}
Flow: nodes and weights declared through the keys array
{"version":"1.0","type":"sankey","title":"How a component reaches a page","subtitle":"Sample data","legend":false,"tooltip":{"valueSuffix":" inserts"},"series":[{"name":"Inserts","keys":["from","to","weight"],"data":[["llms.txt","UI Basics",640],["llms.txt","Enhancements",380],["/system","UI Basics",210],["/system","Enhancements",160],["UI Basics","Product pages",700],["UI Basics","Marketing pages",150],["Enhancements","Marketing pages",470],["Enhancements","Product pages",70]]}]}
A diverging colour scale, pinned to zero
{"version":"1.0","type":"heatmap","colorScale":"diverging","title":"Page views, week on week","subtitle":"Sample data, difference against the same day last week","legend":true,"xAxis":{"categories":["Mon","Tue","Wed","Thu","Fri"]},"yAxis":{"categories":["UI Basics","Enhancements","System"],"reversed":true,"title":{"text":null}},"tooltip":{"valueSuffix":" views"},"series":[{"name":"Change","data":[[0,0,18],[1,0,-7],[2,0,24],[3,0,5],[4,0,-12],[0,1,-9],[1,1,14],[2,1,-3],[3,1,21],[4,1,8],[0,2,6],[1,2,-16],[2,2,11],[3,2,-4],[4,2,19]]}]}
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for HighchartsX
The chart is a sankey, treemap, sunburst, gauge, waterfall, candlestick or anything else outside the basic set.
The whole chart can be expressed as one JSON payload, generated or swapped at runtime.
The chart must follow the project’s dataviz tokens in light and dark.
You need Highcharts’ own accessibility, export and tooltip behaviour.
Reach for something else
Bar, line, pie or doughnut is all you need — ChartX is lighter.
You want the grouped five-object settings model — that is ChartX2.
Readers need to edit the data inside the chart.
Io — UI Basics
Every chart above is a live HighchartsX instance with an empty schema, so each one is the component’s own example for its type. Colour comes from the project’s dataviz tokens.