Forum Academy Marketplace Showcase Pricing Features

Chart Tools Plugin

Hi @blake1

I had a simialr issue with the same charts and there is not easy answer as its seems to be a limitaion of the chart code itself.

@edwardbutcher did provide a solution which may work for you.

… is rooted deep within the backend code of chart.js… not hackable - by me, any how.

One workaround would be to create your own legend (given that Often, Sometimes etc. are predictably the outcomes) and have a small group for each legend title (containing the color block and text) and then conditionally show / hide the group based on whether that outcome is included within the query results.

1 Like

@edwardbutcher I am trying to report data from an external API call, I am not sure exactly why I am getting this error?

hi @ryley.randall - best to drop me an email at [email protected]. You will need you to open up viewing access to your App and include a link to the editor.

Pulling data from an API should fine provided that the data arrives in the right formats for both category and value lists. I’m sure we can get it figured out pretty fast.

You may have already seen that Bubble have recently pushed native grouping and aggregation controls to database searches.

Until now Chart Tools has been managing grouping and aggregation via it’s own code. Bubble’s implementation is excellent though and I am currently coding Chart Tools over to take full advantage of it. This is not a like-for-like switch… more complex charts involving multiple Series will still need backend matching and consolidation.

All that is to say that the next update of Chart Tools will bring the full capabilities of Bubble’s new feature, along with some other neat updates to the Chart.js Elements, including a fourth Series, gradient fills, improved date handling and a multi-series radar Element.


Hey Edward, I recommend you review your website in Safari on macOS.

Chart Tools now integrates with Bubble’s native grouping and aggregation tools!

Please be sure to read the documentation here and the guidance below before switching over. This update is not backwards compatible and you will need to make adjustments to each chart’s properties.

In Version 3.2.1
Note: Chart.js elements are now just called Chart Tools: Bar / line and Chart Tools: Pie

New with Chart Tools elements:

  • Integration with Bubble’s Group by:… tool for Chart Tools elements (amCharts elements do not integrate, but still offer out-the-box data summary tools)
  • Gradient fills for Bar and Line areas
  • Straight integration with Bubble date data - no need to apply a Formatted as operation
  • Override option for responsive labelling - you can now force axis labels to be shown for all data points
  • Line tension control adjusts the sharpness / curviness of the line with line graphs
  • Prefix values on the left or right Y-Axes with a unit of measurement - e.g. $ (suffix option to follow)
  • Control column / bar width

No changes have been made to amCharts elements

Note on integrating over to Version 3.2.1
This update is not backwards compatible. The data setup for each chart has been redesigned from the group up - therefore your current data options will not port over. Follow the order below to setup your data:

  1. Thing to plot: Select the database Thing (or otherwise) that you are charting
  2. Data Source: Run one search for the parent object that contains the fields that you use for your Series labels and values. The type of this Thing must match your selection in Thing to plot. You should apply constraints at this step of the process. You can also add a Group by:… operation - read here to understand how that works. You can also find an example in the Reference.
  3. Label field & Value field: Select the Fields that contain your label and value data.
  4. + Label’s nested Thing & + Value’s nested Thing: If either your label or value data is contained in a linked object then you should select that Thing here. For example, if your label is a Company’s Name, but Company is a Thing in it’s own right, then you would select Company for + Label’s nested Thing followed by Name for + Nested label’s field (which will appear when you pick a Nested Thing)

If you get errors converting your existing chart over, then you should try from a new element. There are a lot of changes in the backend and switching over may need you to make a fresh start. You can revert to Version 3.0.1 if you have persistent problems and email [email protected]


Nice one ed!

I have just pushed a change to the Chart Tools elements (pie and bar/line) that brings support for API and Custom State data sources back to the plugin. Thanks to @CoachLani for spotting this.

In Version 3.3.0
If an API or Custom State is being used to plot a chart, then number should be selected as the Thing to Plot. The Values data should then be connected using Data Source, then Label data connected using Other Label Data. Effectively, this allows you to revert to the historical (pre-last update) method of connecting up data.

See Data Source and Other Label Data in the reference file to read more.

1 Like

Awesome!! It works great. Thanks for your help!!


1 Like

Just installed this plugin and loving it so far… great value! I have a few questions (didn’t see any of this covered in the documentation):

  1. How can I change the format of the values? E.g. I have data that is in the format 0.27 in the bubble database but I want to present it as 27%
  2. Same question for dates - can I change a date’s format to be May-18?
  3. Any plans to add a 3rd/4th series option for those of us who want to overload our charts? :slight_smile:


Hey @geoff.byron - glad it’s working for you so far.

  1. %'s are a touch fiddly. They are definitely upcoming, perhaps not the next release but likely the one after. Releases are approx. monthly.
  2. The last release brought date improvements and date format is now on the Next list, likely doable for the next release.
  3. Yep, definitely. I’m not sure I’ll go as far as I did with the amCharts elements (8, I think)… but next calling point will be four. This is an easy upgrade to make and I’m planning on bringing it to the next release. Also upcoming next time is horizontal bar charts.


1 Like

I have just pushed some upgrades and features to Chart Tools. Take a look below, there is a link included to the documentation after each.

In Version 3.4.0
New with Chart Tools elements:

  • Horizontal bar graph added: Just select horizontal bar from the Graph Type dropdown in Series 1 of a Bar/line chart. Note: it’s not possible to add horizontal line graphs to a horizontal chart. Reference
  • Four Series now available. Bar / line charts can now contain up to four series in any combination of bar or line graphs. These are compatible with Bubble’s :group by feature and run additional filtering to ensure data is coherent. Reference
  • Legend & Tooltip label upgrades: You now have finer control over the labels shown within tooltips (hover labels) and legends. This includes displaying % values @geoff.byron. Currently these upgrades are in pie only but will come to bar/line soon. Reference
  • Ensure a pie segment is always first: Sometimes you will want to insist that a specific pie segment is drawn first - this is common when creating Apple Watch Activity-style doughnut charts. Sometimes you can use filters to manage this, but it’s not always possible (@andrew.illingworth91). This behaviour can now be forced to ensure the correct pie segment is positioned at the top of the chart. Reference

Please email suspected bugs to [email protected] or PM me on the forum.


Hi @edwardbutcher

Loving the updates!

A feature suggestion: if we can have more control over the legend position so at the moment it wraps as in the attached, it would be good to say have it always shown on the left - for example, or at least have it so there is no overlap.


Thanks @StevenM - glad they’re useful!

On legend layout this is mostly a product of the dimensions of your element - when the legend runs out of height it wraps to a second column. This is a good behaviour, unless - as above - there isn’t the width available to accommodate both.

In the example below I added only 7px of height to the second instance to remove the second column. I know you’re tight for space, but this is likely your best route for now.

I have added font sizing to the roadmap. Once live, this will allow you to pack more legend into the same space and will be another option for you.


1 Like

Thanks @edwardbutcher this fixed it!

As another feature suggestion, if you could expand the option for colours to specify a particular colour for a particular label.

So at the moment it keeps the colours consistent, but you could have the colour for one label different from another if the options are different.

So if you look at the attached I am using the same scale options but because some answers do not have a particular label it seems to assign the colour to the next in the list.

A feature request would be like the label at the 12 o’clock position but for colours where an additional option would say assign this colour to this label, this colour to this label etc…

1 Like

Yep good call on colour mapping - added to roadmap. It’s available with the amCharts elements… I will port it over for the next update.

1 Like

@edwardbutcher Hey i am having a problem where when ever i add any kind of nested labels the charts totally vanish and do not work

Hi Ryan. If you drop me a PM with a link to your app (and open up access in Settings > General) I’ll take a look.
Thanks, Ed

I’m having trouble using this plugin. I was able to use the amCharts plugin just fine, but when I upgraded to the $5/month subscription plan (so I could go beyond a 2 series chart) it pointed me to the chart tools plugins and now the same expressions I was using for amChart do not work with Chart Tools.

Admittedly, I am a novice bubble user but I was really hoping the fundamentals wouldn’t change in the premium version. My chart doesn’t load, rather I just get a “spinning icon”.

I have read the documentation but can’t figure out what I’m doing wrong.

Hey @Kamp - when you upgrade to Chart Tools you get access to a premium version of amCharts which allows you to build out multi-series charts, AND (slightly confusingly) you get access to two additional ‘Chart Tools’ elements. So you will have four elements to chose from, plus the original two free amCharts elements - although you’ll stop using them now and should remove them.

Your original expressions will work in the premium amCharts elements but they will need tweaking for the ‘Chart Tools’ elements. This is because grouping / aggregation functions work a little differently across both pairs of elements.

I’m going to get back to you via your DM so we can get you on the right tracks.