Fully keyboard-navigable, accessible (A11Y, ARIA-label, WCAG-AA, ADA-compliant) & customizable charts and maps plugin for Bubble.io apps. 33+ chart types by Observable Plot. Built-in transforms (group, bin, stack, facet...) auto-aggregate your data. Maps, dark mode, PNG/SVG/clipboard export & more.

Plugin version: 1.0 Last updated: April 2026 Support: [email protected] Please note we are not affiliated with Observable, Inc.

What is Observable Plot?

This plugin brings the acclaimed Observable Plot library (the high-level visualization library built by the same team as D3.js) to your Bubble app. It’s known across the data viz community for one thing above all: it does the right thing by default. Time behaves like time, numbers behave like numbers, axes appear where they should, and your chart emerges from your data with very little configuration.

The plugin exposes 33 chart types, built-in data transforms, faceting, geo maps, and smart number formatting, all straight from the plugin element’s fields.

Quick Start (3 Steps)

Step 1: Drag a Plot Chart element from the element tree onto your page. Resize it to your desired chart dimensions.

Step 2: In the element’s properties panel, set:

• X Values → Your horizontal data (e.g., Do a Search for Sales:each item's Date)
• Y Values → Your vertical data (e.g., Do a Search for Sales:each item's Amount)

Step 3: Choose a Chart Type from the dropdown (Line, Bar, Scatter, etc.).

Your chart renders automatically.

Letting users pick the chart type

If you want your end users to choose the chart type at runtime (e.g. from a dropdown in your app), use the Dynamic Chart Type (override) field instead of, or in addition to, the static dropdown.

1. Add a Dropdown element to your page with these exact options (case-sensitive, including spaces and punctuation): Line, Bar (Vertical), Dot / Scatter, Histogram, Auto, etc.
2. In the Plot Chart’s Dynamic Chart Type (override) field, bind to that dropdown’s value (e.g. ChartTypeDropdown's value).
3. Leave the static Chart Type dropdown set to a sensible default (it’s used when the dynamic field is empty).

When the dynamic field is set, it takes priority. If the value doesn’t exactly match a valid chart type, the chart shows a clear error listing the valid options so you can fix the binding.