The BEST Way To Build Live Charts In Webflow (Chart.js)

Today I am going to show you how you can build live, dynamic charts inside of Webflow using Webflow CMS! This way you can present your clients' data in real time with a beautiful assortment of charts and graphs.

One of the most common requests I receive is how to make live, dynamic dashboards inside of Webflow with client data visualized in beautiful charts upon the page. These live charts, ideally, would be tied to our live CMS collections to be updated automatically whenever we update our CMS data in Webflow. This way, each member could have their own personalized data in the form of digestible, beautiful charts on their personal dashboards.

Chart.js seems to be the best option to embed live charts inside of Webflow and, as such, will be the focus of this video. Now, Chart.js has a very steep learning curve and does require a lot of custom code. In this video, I want to strip away the complexities of using Chart.js and show you the basics of embedding into your site and linking to your CMS collections.

In this video I will show you how to embed live, automatically updating charts onto your client dashboard sites. I will show you how to get Chart.js implemented in your project settings and how to tie your charts to your dynamic CMS data. I will not be focusing on styling or any of the more complex customization options in this video. By the end of this video you will have an automatically updating chart pulling in your live CMS data!

I have been using Webflow to build my websites for years. If you are a novice website developer looking to launch a new project or business (and don't know how to code), your best bet is using Webflow. With Webflow, you code visually, and have complete control over your website down to the pixel. No more having to go through style sheets or JSON files in Wordpress in order to customize your site to your needs. With Webflow, you are able to visually code your website from scratch. Subscribe for weekly tutorials!

-------------------

🆘 Need help building your paid membership site??? ⬇️
https://www.memberify.io/
✉️ Business Inquiries: alex@automatio.io

-------------------

Resources -

🥾 Chart.js Starter Guide: https://tobiasahlin.com/blog/chartjs-...

🎬 PART ONE - The FASTEST Way To Build A Membership Site In Webflow (Memberstack 2.0):    • The FASTEST Way To Build A Membership Site...  
🎥 PART TWO - The EASIEST Way To Build Unique Member Dashboards In Webflow (Memberstack 2.0):    • The EASIEST Way To Build Unique Member Das...  

📊 Chart.js: https://www.chartjs.org
🌊 Webflow: https://try.webflow.com/l9bi5zf0cljy

--------------------

Timestamps -
0:00 👋 INTRO
0:50 🔨 Groundwork
1:46 📜 Step #1: Add Chart.js Script
2:29 📊 Step # 2: Create Your Chart
4:12 🔗 Step #3: Customize & Link Chart To Webflow CMS
6:55 👷 Test!!!
8:27 ✌️ CONCLUSION

--------------------

👨 WHO AM I -

I'm Alex, a 26 year old Financial Analyst who lives in Nashville, TN. I'm now over half way through my twenties (I'm getting old!) and believe that I've acquired some valuable life advice over the past 6 years that I wish I knew when I was just entering my third decade of life. I make videos to pass on these life lessons to all of you (along with other ideas, tips, tricks, knowledge, experience, stories of success, stories of failure, etc.) so that you all can survive your twenties with more grace than I have managed so far!