A bar chart for Framer, drawn in the component with no charting library and nothing loaded from a server.
Enter the data as plain lines of text, one row per line: a label, then up to three values. That is the whole authoring step. The chart animates up from the baseline when it scrolls into view, auto-scales its axis to a rounded maximum, and starts at zero.
Vertical or horizontal. Value labels, gridlines, axis labels and a legend all switch on and off. Numbers format as plain, currency or percent, with decimals and compact notation, so 1200000 reads as 1.2M. Per series colour and name, bar radius, bar gap and group gap are property controls, and hovering a bar raises it and shows a readout.
Figures are tabular, so a value label does not change width as it counts.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
A bar chart for Framer, drawn in the component with no charting library and nothing loaded from a server.
Enter the data as plain lines of text, one row per line: a label, then up to three values. That is the whole authoring step. The chart animates up from the baseline when it scrolls into view, auto-scales its axis to a rounded maximum, and starts at zero.
Vertical or horizontal. Value labels, gridlines, axis labels and a legend all switch on and off. Numbers format as plain, currency or percent, with decimals and compact notation, so 1200000 reads as 1.2M. Per series colour and name, bar radius, bar gap and group gap are property controls, and hovering a bar raises it and shows a readout.
Figures are tabular, so a value label does not change width as it counts.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
