How to add a chart to your app in 3 minutes:


Here are step-by-step instructions (with screenshots) on how to use the Charts plugin:
https://bubblebuilder.substack.com/p/how-use-bubble-chart-js-charts-plugin

💻  We highly encourage you to take a look at the editor page for the demo, where you can see how the charts were built. Here's the demo (with link to editor):
https://techblocksco.bubbleapps.io/core-charts-demo


🎞️  Here's the complete guide to set up the charts on YouTube for one of the many chart types (bar charts):
YouTube Tutorial for Bar Charts


📊  How do I add a chart to the page?

1. Once you install the plugin, the charts will appear on the left side of your Bubble editor in the “visual elements section.”

2. The charts are all fully responsive. You can modify the height and width of the charts and they will behave responsively like any other Bubble element.

3. You can customize the chart’s properties on the element inspector. Example properties you can customize are: Max/Min Y Axis value, Show/Hide Data Labels on Charts, Axis Gridline Colors, Animation Duration, Font Style/Size/Color, and 120+ additional customizations.


📊  How do I add dynamic data to a chart?

Please see this documentation link (with editor example): https://chartsdemo.bubbleapps.io/version-test/dynamic-data-examples

1. Enter the X-Axis Values. This can be a static comma-separated list of text (e.g. “2020, 2021, 2022”) or it can be a dynamic search (e.g. “Search for Revenue’s Year: unique items”)

2. Enter Series names, colors, and values. This can be static or dynamic as well. For example, for a Bar/Line Chart you could set the following:

Series name = "Revenue"

X-Axis Values = “2020, 2021, 2022”

Series Y-Axis values = "1000, 2000, 3000"

The above example would create a series called "Revenue", with each of the data-points:

Datapoint 1: (2020, $1000)

Datapoint 2: (2021, $2000)

Datapoint 3: (2022, $3000)

Keep the number of items in each list the same. For example, if you are using 10 data points on the Y-axis, be sure to use 10 data points on the X-axis.  


📊  How do I add/remove a Data Series using a workflow action?

1. You can add an infinite number of data series to your charts.  Go to the workflow tab, add an action, go to the element actions sub-menu and select "Add a Data Series to Chart"

2. Enter the customizations on the workflow action's menu (e.g. series name, color, values, labels).  Voila! That series should be added to the chart!

3. To remove a data series, go to the workflow tab and add an action called “Remove a Data Series from Chart.”


📊  Custom Tooltips when Chart's Value is Hovered

Please see this documentation link (with editor example): Custom Tooltips


📊  Events when Bar/Line/Point is Clicked or Hovered

1. You can set up events to fire when a chart value is clicked or hovered. Open the workflow tab and add the event called "A Chart Value is clicked" or “A Chart Value is hovered” (this is in the Events --> Elements submenu).

2. This will trigger events on your page. Refer to the value clicked by accessing states on your chart. For example, for a Bar Chart, you can access the "Clicked Point's X Value", Clicked Point's Y Value, and "Clicked Point's Series Name"

📊  Where can I find more documentation links?

There are 30+ detailed documentation links with editor examples here: Chart JS - Documentation Articles.
Our team has put a lot of time to create these examples to make sure this is easy for you to add charts and custom functionality to your app!


Email support/feature requests to [email protected]