Skip to content

Bubble plugin · Charts

The Bubble Chart.js plugin in Next.js

A line/bar chart component drawn with Chart.js 1.1.1.

Converts

By The deBub teamUpdated

On this page

01What it becomes

A line/bar chart component drawn with Chart.js 1.1.1. Bubble’s Line/Bar Chart plugin draws with Chart.js 1.1.1, so the generated chart uses the same version and looks the same. The data source and the label and value expressions per point are converted from your app.

npm packages added to your app: chart.js@1.1.1.

02What converts

  • Line and bar charts with your data source
  • Label and Y-value expressions per point
  • Colors, scale, grid, tooltips, curve and fill settings
  • Keep-aspect-ratio sizing

03About this plugin

Chart.js is made by Bubble itself (visual element). See its page in the Bubble manual.

Questions

Does the Chart.js plugin work outside Bubble?
Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — A line/bar chart component drawn with Chart.js 1.1.1 (chart.js@1.1.1).
Will my Chart.js settings carry over?
Yes. deBub reads the plugin’s settings, conditions and workflows from your .bubble export and converts all of the plugin’s parts. Secret keys are the exception: you add them as environment variables.

The deBub team

We build the Bubble → Next.js compiler behind deBub. Spotted something out of date? Write to hello@debub.io.

All 45 plugins

Typed server-side functions in src/server/api-connector.ts

Converts

Toolbox

Not Quite Unicorns

Components and browser helpers; your own JavaScript runs in the browser as before

Partly converts · 9 of 10 parts

A React component that ships with your app: icons, toggle, range slider and checkbox

Converts

Leave Bubble.
Keep building.

The scan is free and shows your exact price. No card needed until you choose to generate.

Start with a free scan