https://framer.com/m/ChartX2-6x4oPh.js
ChartX2
ChartX2 is the grouped-settings chart. Instead of a flat control list it exposes five objects — data, chart, colour, legend and format — and reads its series from props, a random generator, an API or pasted JSON. Every specimen below runs the component’s own demo series.
Examples
Live specimens for every control the component exposes.
Default
Straight out of the box: source Props, chartType bar, stacked on, legend at the top.
Chart types
chartSettings.chartType is the single switch. The three demo series stay exactly as they are.
bar
line
pie
doughnut
Stacking and direction
stacked decides whether series sit on top of each other; direction turns the bars on their side.
stacked off · direction x
stacked on · direction y
Legend
legendSettings moves, re-shapes or removes the legend without touching the plot.
position right · align center
show off
Grid and axes
chartSettings strips the chrome — grid lines, tick labels and axis borders are all independent booleans.
grid and labels on
gridX/gridY off · labelY off
Value formatting
formatSettings wraps every tick on an axis, so a currency mark never has to live in the data.
tickFormatterY off
tickFormatterY on · prefixY $
Data sources
Props takes typed labels and datasets, Random generates values between randomMin and randomMax, API polls apiUrl, and JSON parses a pasted body. Everything on this page uses Props with the component’s own demo series.
TODO:data-source — no production dataset is attached to this page. ChartX2’s built-in Props demo series is left untouched, per the migration rule on data-driven components.
Props
The controls exposed on the instance panel, grouped as ChartX2 groups them.
Usage
Guidance carried over from the component definition.
Reach for ChartX2
You want chart decisions grouped, not a flat list of controls.
Series come from props, a random generator, an API or JSON.
You need scatter or bubble, which ChartX does not draw.
Legend, grid, axes and tick formatting all need separate control.
Reach for something else
You need heatmap, tree map or candlestick.
Updates must stream in real time, beyond API polling.
A flat prop list is simpler for the job — that is ChartX.
Io — UI Basics
Every chart above is a live ChartX2 instance over the component’s own demo series. Colour, type and radius resolve from the project theme tokens.