https://framer.com/m/ChartX-hvzbOG.js
ChartX
ChartX wraps Chart.js in a themed card. Six chart types, three data sources, and every colour resolved from the project tokens. The specimens below all render ChartX’s own built-in demo CSV — no dataset has been substituted.
Examples
Live specimens for every control the component exposes.
Default
A bar chart over the component’s built-in demo CSV. Type, colour and radius come from the theme, not from the chart.
Chart types
One prop switches the whole visualisation. The data underneath never changes.
bar
line
pie
doughnut
Radial types
radar and polarArea read the same series, plotted around a centre instead of along an axis.
radar
polarArea
Line shaping
lineCurve straightens or rounds the path; areaFill and fillOpacity control the wash underneath.
lineCurve 0 · areaFill off
lineCurve 0.5 · fillOpacity 0.24 · pointSize 5
Bar radius
barRadius is the only difference between these two — square corners read denser, rounded reads softer.
barRadius 0
barRadius 16
The card
padding, borderWidth and borderColor style the container around the plot; hoverLift adds feedback on pointer.
padding 8 · no border
padding 24 · 1px border · hoverLift
Data sources
manual takes typed datasets, csv parses pasted text, api polls a remote endpoint. Every specimen on this page uses csv with the component’s own demo data — swap in a real source before shipping.
TODO:data-source — this page has no production dataset attached. ChartX’s built-in demo CSV is left untouched, per the migration rule on data-driven components.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for ChartX
Bar, line, pie, doughnut, radar or polar area is enough.
Data arrives as typed values, pasted CSV or a remote API.
The chart must follow the theme tokens in light and dark.
You need goal lines, legends, tooltips and value formatting.
Reach for something else
Rendering has to go beyond what Chart.js can draw.
Users need to edit the data inside the chart.
You want the grouped settings model — that is ChartX2.
Io — UI Basics
Every chart above is a live ChartX instance over the component’s own demo CSV. Colour, type and radius resolve from the project theme tokens.