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

**URL:** <https://forum.nocodework.com/t/how-to-create-a-dynamic-pie-chart-with-html-chart-js-in-bubble-io/187>\
**Category:** General\
**Created:** [July 2, 2025, 1:07pm UTC](https://forum.nocodework.com/t/how-to-create-a-dynamic-pie-chart-with-html-chart-js-in-bubble-io/187 "2025-07-02T13:07:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gautam](https://yyz2.discourse-cdn.com/flex032/user_avatar/forum.nocodework.com/gautam/32/12_2.png) [@Gautam](https://forum.nocodework.com/u/Gautam)\
**Post date:** [July 2, 2025, 1:07pm UTC](https://forum.nocodework.com/t/how-to-create-a-dynamic-pie-chart-with-html-chart-js-in-bubble-io/187/1 "2025-07-02T13:07:46Z")

</div>

Hey Bubble community! 👋

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.

### ✅ **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

* * *

### 🛠 **Step-by-Step Example:**

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

```auto
<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](https://canada1.discourse-cdn.com/flex032/uploads/nocodework/original/1X/3f32456af5ff31a9131751e4891e6c978d7994dc.png)

### ⚡ **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).

* * *

### 🎨 **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! 🙌

Thankyou