# How to build charts and graphs in Bubble - Tool: Bubble - Difficulty: Beginner - Time required: 15-20 min - Compatibility: All Bubble plans - Last updated: March 2026 ## TL;DR Add data visualization to your Bubble app using chart plugins like Chart.js or Chartmaster. This tutorial covers installing a chart plugin, connecting it to database data, configuring bar, line, pie, and donut charts, and making them responsive across screen sizes. ## Overview: Creating Charts and Graphs in Bubble Visualizing data with charts makes dashboards and reports more useful. This tutorial shows how to add charts to your Bubble app using plugins, connect them to live database data, and configure different chart types. ## Before you start - A Bubble account with data to visualize - A chart plugin (Chart.js or Chartmaster) - Basic understanding of Data Types and searches ## Step-by-step guide ### 1. Install a chart plugin Go to the Plugins tab and search for Chart.js or Chartmaster. Install your preferred option. Chart.js is free and widely used. Chartmaster offers more chart types. Both create visual elements you can drag onto pages. **Expected result:** A chart plugin installed and ready to use. ### 2. Add a chart element to your page In the Design tab, click + and search for the chart element from your plugin. Drag it onto the page. Set a size of at least 400x300px. Choose the chart type: Bar for comparisons, Line for trends, Pie for proportions, or Donut for category breakdowns. **Expected result:** A chart element on your page ready for data configuration. ### 3. Connect the chart to database data In the chart element properties, set the Data source to a search. For a sales chart: Do a search for Orders grouped by month. Set the X-axis to the month and Y-axis to the sum of amounts. Most chart plugins accept lists of values for labels and data points that you can construct from searches. > Pro tip: Use :group by with aggregation (sum, count, average) to prepare data for charts directly in the search expression. **Expected result:** The chart displays live data from your database. ### 4. Customize chart appearance Configure colors, labels, legends, and tooltips in the chart element properties. Set custom colors for each data series. Add axis labels. Enable tooltips that show values on hover. For brand consistency, use your app colors from Style Variables. **Expected result:** A professionally styled chart matching your app design. ### 5. Make charts responsive Set the chart element to 100% width of its parent group. Most chart plugins automatically resize. Add a min-height to prevent the chart from collapsing on mobile. Test at different breakpoints to ensure readability. **Expected result:** Charts scale appropriately across desktop, tablet, and mobile. ## Complete code example File: `Workflow summary` ```text CHARTS — SETUP SUMMARY\n========================\n\nPLUGIN: Chart.js or Chartmaster\n\nCHART TYPES\n Bar: compare categories (sales by product)\n Line: show trends (revenue over months)\n Pie: show proportions (market share)\n Donut: category breakdown (expense categories)\n\nDATA CONNECTION\n Source: Do a search for [Data Type]\n :group by [category field]\n Aggregation: sum, count, or average\n X-axis: category labels\n Y-axis: aggregated values\n\nSIZING\n Width: 100% of parent\n Min-height: 300px\n Responsive: auto-resize enabled ``` ## Common mistakes - **Not aggregating data before passing to charts** — Charts expect summarized data (totals per category), not raw records. Fix: Use :group by with sum/count aggregation in your search expression. - **Overloading charts with too many data points** — Charts with 50+ categories become unreadable. Fix: Limit to 10-15 categories. Group smaller values into an Other category. - **Using the wrong chart type** — A pie chart for time-series data or a line chart for categories misleads users. Fix: Use Line for trends over time, Bar for comparisons, Pie for proportions of a whole. ## Best practices - Use :group by aggregation for chart data preparation - Limit categories to 10-15 for readability - Choose chart types based on data relationships - Use consistent brand colors across all charts - Add axis labels and legends for clarity - Make charts responsive with percentage widths ## Frequently asked questions ### Which chart plugin is best? Chart.js is free and covers most needs. Chartmaster offers more types and customization for complex dashboards. ### Can I create real-time updating charts? Yes. Bubble auto-updates searches on page elements. The chart refreshes when underlying data changes. ### How do I export charts as images? Use a JavaScript action to call the chart canvas toDataURL method, or use a screenshot plugin to capture the chart element. ### Can I show multiple data series on one chart? Yes. Most plugins support multi-series charts. Add additional data sources for each series. ### Can RapidDev help build analytics dashboards? Yes. RapidDev builds comprehensive dashboards with real-time charts, KPIs, filters, and export functionality. --- Source: https://www.rapidevelopers.com/bubble-tutorial/create-charts-and-graphs-in-bubble © RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-charts-and-graphs-in-bubble