5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5e:I[539959,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"CommentSection"] 5d:T5b4,

A simple, flexible and powerful chart component for Framer that gives you full control over your data and presentation. Bring your own data as JSON, map the fields you want to use, and customize the chart to match your design system or layout.

Supported chart types

The component supports both Bar Charts and Line Charts.

Bring your own data

Paste your own JSON data to be used in the chart, or use fetch to use an external data source. Then manually map the data to be used in the X and Y axis. You are in control of the data, and how it's displayed

Customization

Multiple options to customize the charts are available, giving you the flexibility to style the charts to fit your theme:

Custom colors for each bar/line
Hide/Show X-axis labels
Hide/Show Y-axis labels
Hide/Show Legend labels
Hide/Show vertical grid line
Stack multiple bars into one (Bar Charts only)
Set stroke width (Line Charts only)

Support & feedback

This component is actively supported.

If you run into issues, have questions, or want to suggest new features, join the Discord: https://discord.gg/S6sQ9p36

59:[["$","$L5c",null,{"post":{"id":"019bd7c7-4a35-7e87-baf3-9f0e6e3c4f6c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"93e88a34-7b43-4908-b399-2b8ae4cc7652","name":"Tobias Haugen","slug":"tobias-haugen","avatar":"https://framerusercontent.com/avatars/users/93e88a34-7b43-4908-b399-2b8ae4cc7652/i5YTR-n_n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"97xn5uwjoVZ98legdVe8","resolved":true,"title":"WF Charts Lite","body":"$5d","bodyJson":null,"introduction":"","slug":"wf-charts-lite","author":{"framerUserId":"93e88a34-7b43-4908-b399-2b8ae4cc7652","name":"Tobias Haugen","slug":"tobias-haugen","avatar":"https://framerusercontent.com/avatars/users/93e88a34-7b43-4908-b399-2b8ae4cc7652/i5YTR-n_n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/97xn5uwjoVZ98legdVe8/wf-charts-lite-KqFLdMHy9ED0LxUq4ObaEwiVdA8hi4"}],"post":null,"createdAt":"2026-01-04T17:55:11.049Z","updatedAt":"2026-01-19T19:29:21.307Z","publishedAt":"2026-01-19T19:42:00.757Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/WFChartsLite-uE9d.js@hl8lkQrUKjO1fUCWTooN","previewUrl":"https://relieved-assumptions-841433.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"367c9c1e-4f68-45ab-8981-56e69b3dda95","name":"Data","slug":"data"}],"lastSaveId":"hl8lkQrUKjO1fUCWTooN"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-19T19:42:00.757Z","updatedAt":"2026-01-19T19:42:00.757Z","reported":false}}],["$","$L5e",null,{"target":{"kind":"post","postId":"019bd7c7-4a35-7e87-baf3-9f0e6e3c4f6c"},"postId":"019bd7c7-4a35-7e87-baf3-9f0e6e3c4f6c","postAuthor":"$59:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you