How to add data visualization in Bubble

Go to the Plugins tab and click Add plugins. Search for Chart Element or Apex Charts (a popular free option). Click Install. The plugin will add new visual elements to your element palette. Apex Charts provides bar charts, line charts, pie charts, donut charts, and area charts. For geographic maps, also install the Google Maps Extended plugin or Mapbox plugin.

On your dashboard page in the Design tab, click the element palette and drag a Chart element onto the canvas. Set the chart type to Bar. For the data source, set Categories (X-axis) to a list of labels such as months or product names. Set Values (Y-axis) to an expression like Do a Search for Sales grouped by Month, with the aggregation set to sum of Amount. Configure the chart colors in the element's Appearance settings. Set the chart title and axis labels in the element's properties.

Add another Chart element and set the type to Line. Set the X-axis to date values, such as Do a Search for Orders sorted by Created Date, then use the created date values as categories formatted to the month or day level. Set the Y-axis to the corresponding numeric values like order amounts. For multiple lines, add additional data series (such as revenue vs expenses) by configuring multiple value sets in the chart element. Enable tooltips in the chart settings so hovering shows exact values.

To make clicking a chart element filter the rest of the page, set up a custom state on the page called Selected Category (text). In the chart element's properties, enable the click event. Create a workflow: When chart element is clicked, set the custom state Selected Category to the clicked category value. Then update a Repeating Group on the same page to include a constraint where Category equals the Selected Category custom state, with Ignore empty constraints checked. Now clicking a bar in the chart filters the table below it.

For a gauge showing a single metric (like percentage complete or current month revenue versus target), add a Chart element set to Radial or Gauge type. Set the value to a dynamic expression such as current month's revenue divided by the monthly target times 100. For a donut chart showing category distribution, set the type to Donut and bind the segments to a grouped search (such as Do a Search for Products grouped by Category with count aggregation). Configure the center text to show the total count.

For geographic data visualization, use the Google Maps Extended plugin or a Mapbox plugin element. Add the map element to your page and set its data source to Do a Search for records that have geographic address fields. The map will display markers for each record. Customize marker colors or icons based on data values using conditionals. Add a click event on markers to show a popup with the record's details. For heatmap-style visualization, use the heatmap layer option available in some map plugins.