How to Create a Dynamic Pie Chart with HTML & Chart.js in Bubble.io

General
1

Hey Bubble community! :waving_hand:

I wanted to share a quick method for adding a pie chart to your Bubble app using the HTML element and Chart.js, with support for dynamic data like Active Users and Inactive Users.

:white_check_mark: Why use this approach?

  • Fully customizable pie charts
  • Works inside Bubble’s HTML element
  • Supports Bubble’s dynamic expressions for live data
  • No need for plugins if you want simple charts quickly

:hammer_and_wrench: Step-by-Step Example:

1. Add a HTML element to your Bubble page
2. Paste this code inside the HTML element:

<canvas id="myPieChart" width="200" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myPieChart').getContext('2d');
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Active Users', 'Inactive Users'],
        datasets: [{
            data: [ [[Search for Users:count (Status = Active)]], [[Search for Users:count (Status = Inactive)]] ],
            backgroundColor: ['#4CAF50', '#FF5722']
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>

image
image542×427 15.9 KB

:high_voltage: Notes:

  • Replace the dynamic expressions with your own Bubble search logic.
  • You can also place the Chart.js <script> in the Page HTML Header for better organization.
  • Chart updates when Bubble’s data changes (on page load or refresh).

:artist_palette: Customization:

  • Change colors under backgroundColor.
  • Adjust labels as per your needs.
  • You can use this for Revenue, User Stats, or anything else!

Hope this helps someone trying to visualize dynamic data in Bubble. If you’ve done something similar or have tips, feel free to share below! :raising_hands:

Thankyou