The Complete Guide To Using Line Charts In Bubble.io

In this video, I'll walk you through the step-by-step process of creating 5 different styles of line charts within Bubble.io. Using the Chart.JS plugin from Techblocks, we'll create our own custom line charts, including; 👉 Line charts with static data values 👉 Line charts that display dynamic data from your database 👉 Single series line charts 👉 Multi-series line charts 👉 Stepped line charts 👉 Stacked area charts 👉 Custom tooltips that display when hovering and clicking data points Links mentioned below: View the Chart.JS demo editor: https://bit.ly/3xRXWy8 Chart.JS documentation: https://bit.ly/3COj1gB --- About me: In 2020, I worked directly with the Bubble team to write their 'How-to build' blog series. Each installment shared written instructions on how to recreate popular products using their no-code tool. Since the beginning of 2021, I've focussed on creating my own video series to teach no-code makers how to get the most out of Bubble's platform. Note: This video series has no direct affiliation with Bubble themselves. This is something I've created on my own. Disclaimer: This video was created as a paid partnership with Techblocks. — Timeline: 00:00 - Linecharts overview 02:14 - Static multi-series line chart 09:44 - Creating custom tooltips for line charts 18:34 - Single series line chart 26:11- Adding custom data labels 29:41 - Dynamic multi-series line chart 36:30 - Creating click events on line charts 43:04 - Stepped line charts 46:01 - Stacked area charts 48:52 - Additional insights