[Plugin update 2023] ChartJS - Charts and Graphs (TechBlocks)

[alex4]

Hi Bubblers,

Since we released our Chart plugin in 2019, over 7,200+ Bubblers and agencies have installed the plugin to build beautiful customer-facing apps and powerful internal data visualization tools. We’re so incredibly happy to hear feedback on how the plugin has enabled Bubble builders to quickly add highly customizable charts in their apps!

Main plugin demo app:
https://techblocksco.bubbleapps.io/chartsdemo

Bubble plugin page:
https://bubble.io/plugin/chart—simple-charts-and-graphs-1553183744528x903111989944909800

We are immensely grateful for your feedback and continue to use it to improve the plugin. Some things we added in the last 2 years based on your feedback:

• Mixed Charts: Add infinite Bar, Line, Area series to a single chart
• RepeatingGroup to Chart: run complex calculations inside RepeatingGroups and pull those numbers from RGs into charts
• Cumulative Charts: build cumulative charts using our Basic List Calculator element
• Draggable Charts: allow users to drag bars, line points, bubble and scatter chart points
• Time Series for Scatter + Line Charts: Use date/time unit along your X-Axis (time series example)
• Images as datapoints: Add images onto your charts (2x2 matrix chart example)
• Boxplot Charts: Create beautiful Box and Whisker Charts

We also invested heavily in documentation with thorough demos, articles, and videos. You can review them here:

1. Documentation articles + demos
2. Video tutorials for Bar Charts, Line Charts, and Scatter Charts

Our top priority is continuing to improve the plugin for users like you. Don’t hesitate to reach out directly to this forum thread or via [email protected] with feedback or feature requests.

Happy Bubbling,
Alex from TechBlocks

[alex4]

Continuing conversations form this thread: [Plugin Update: 2021] TechBlocks Charts and Graphs (Chart.js) - #686 by a.alighanbari

I see there was some discussion back in October/November 2022 about issues with labels for negative values on Bar charts.

Hey @Kent – thanks for reaching out regarding that issue. We’ve pushed an update in v4.38.108 that should fix the negative decimal rounding. Note that we were in middle of a chart properties redesign, so this one comes with a big rearranging of the properties on the chart elements.

Please make that upgrade and let me know how it’s working for you!

---

Any plans to add drop shadow and/or gradient to stacked bar charts?

Hey @treb.gatte – thanks for these feature requests. Currently, you should already be able to add gradients for stacked bar charts via workflow actions (there’s a property on the bottom of the action’s properties where you can set “Bar gradient” to “yes”.

I can add the drop shadow request to the backlog and keep you posted if/when we start on that one!

---

Just wanted to give some props to your consistent responses to the community. Really impressive to see a thread this long. muy buen trabajo!

@josh10 thanks for the kind words! That makes my day!

---

Hey Alex, small issue with the mixed charts… I’ve created a chart with two separate y-axes ‘A’ and ‘B’. For the data labels, the unit after the ‘A’ label seems to be working fine but the unit after ‘B’ does not seem to show, instead we have the same unit as A. Could you please take a look. Thanks.

Interesting, I’ll take a look and keep you posted @a.alighanbari ! Thanks for bringing to my attention

[Kent]

@alex4

I see there was some discussion back in October/November 2022 about issues with labels for negative values on Bar charts.

Hey @Kent – thanks for reaching out regarding that issue. We’ve pushed an update in v4.38.108 that should fix the negative decimal rounding. Note that we were in middle of a chart properties redesign, so this one comes with a big rearranging of the properties on the chart elements.

Please make that upgrade and let me know how it’s working for you!

@alex4 Upon a quick check, it looks like this has resolved the labels issue I was having with negative values (with decimal places). However, this latest plugin version seems to have introduced dummy data to “Series 3” in all of my bar charts (In the example I cited previously, I now have “Series 1” with my actual data and “Series 3” with fake information). It looks like I can just remove the dummy data, but I’ll have to go through each of the charts throughout my app to do so. Perhaps that’s a bug that can be fixed for a future version?

In any event not a big deal - thank you very much for the quick turnaround on this!

[Kent]

@alex4 After doing a bit more testing I’ve come across another edge case with the bar chart labels for negative values. If the data point’s value is between 0 and -1 (e.g. -0.33) the label is not showing a negative sign. Here is a screenshot showing what I mean:

For reference, larger negative values (e.g. -2.63 or -11.14) are displaying the negative symbol in the chart labels:

Thank you,
Kent

[aestela]

Hi @alex4 hope everything is going well!

Wanted to ask if the Log scale was ever achievable I found a post from 2021 about it but can’t find it in the scatter nor bubble chart configs.

[Plugin Update: 2021] TechBlocks Charts and Graphs (Chart.js)

Hey @princesssoria13 — for the relevant Charts (i.e. Scatter Charts, Bubble Charts, Advanced Line Charts) the logarithmic axis will be available on both X and Y axes for other charts like Bar, Standard Line this will be available on the Y axis. For Horizontal Bar, it will be available on the X axis. Keep you posted on when this is ready!

Thank you!!

[premrajnarkhede]

@alex4 I am using C&G for making dynamic line charts. Is it possible to make axis choice (A/B) dynamic? Right now that field can’t take dynamic data. Also if we can allow more than 2 axis on either left/right side

Thank you for developing this

[ilangutman]

Hi @alex4 , hoping this one will be simple.

How do I get my x-axis labels to wrap onto new lines?

Currently they are spilling into the series on either side, making them unreadable. I’m on 4.38.79, the most recent old responsive engine version.

Thanks,

Ilan

[alex4]

How do I get my x-axis labels to wrap onto new lines?

Hey @ilangutman thanks for the question!

Can you try upgrading to the latest version 4.38.114? We pushed an update awhile back that should change the angle of the x-axis label to address super lengthy labels overlapping. Let me know how that works for you!

---

@Kent

@alex4 After doing a bit more testing I’ve come across another edge case with the bar chart labels for negative values. If the data point’s value is between 0 and -1 (e.g. -0.33) the label is not showing a negative sign. Here is a screenshot showing what I mean:

Thanks for the catch here. I’ve pushed an update in 4.38.115 that should fix the issue. Thanks for the patience on this one–as you might imagine there are lots of edge cases and conditionals. Please take a look and let me know if I can address anything else!

---

@premrajnarkhede thanks for your request here:

I am using C&G for making dynamic line charts. Is it possible to make axis choice (A/B) dynamic?

This currently isn’t possible (you’ll have to set up conditionals)–although I do have it on my roadmap to make these axes dynamic for Mixed Charts!

---

@aestela

Wanted to ask if the Log scale was ever achievable I found a post from 2021 about it but can’t find it in the scatter nor bubble chart configs.

[Plugin Update: 2021] TechBlocks Charts and Graphs (Chart.js) Plugins

Great to hear from you @aestela – we haven’t built this update in yet for log scaled axes. Does it sound like you need this mostly on scatter and bubble charts?

---

[aestela]

Hey Alex! Great to hear from you too! Mainly on scatter charts! At least for now @alex4

[christo1]

Printing bug. Whenever I want to print a page, using a plugin or simply the print dialogue and your plugin is visible on the page, I get over 600 pages coming up on the print dialogue. I contacted Bubble support and this was their reply:
Thank you for your patience.

After previewing the testzq page in Safe Mode with all community plugins disabled, I was no longer able to reproduce the behavior of the Print dialog showing over 600 pages:

In a local copy of your app, I was able to determine that the behavior was caused by the “Chart-Bar/Line Air” element of the Chart JS - Charts and Graphs plugin:

Because the Chart JS - Charts and Graphs plugin is developed by a third party, our team is unfamiliar with how it works as it may contain custom code causing this behavior. I recommend reaching out to the developer directly to let them know about this behavior on Windows. You can contact the developer, TechBlocks, on this page.

Hope this information is helpful. I sincerely apologize for the limited action I’m able to take here - please don’t hesitate to reach out if you have any other questions/concerns and our team would be happy to assist.

Could this be fixed please as it really affects my app as users now have to remember to select the correct number of pages or else…

[Kent]

@alex4

@Kent

@alex4 After doing a bit more testing I’ve come across another edge case with the bar chart labels for negative values. If the data point’s value is between 0 and -1 (e.g. -0.33) the label is not showing a negative sign. Here is a screenshot showing what I mean:

Thanks for the catch here. I’ve pushed an update in 4.38.115 that should fix the issue. Thanks for the patience on this one–as you might imagine there are lots of edge cases and conditionals. Please take a look and let me know if I can address anything else!

@alex4 the negative symbol is now showing for small amounts but there are two issues:

1. There is no leading 0 in the labels for negative values between 0 and –1. As you can see in the screenshot, a value of –0.33 is displaying as “– .33” while a value of +0.33 is displaying as “0.33”. I would prefer the leading zero to show in both cases (i.e. “–0.33”).
2. There is now a space between the negative symbol and the data value (i.e. displaying “– 0.33” instead of “–0.33”. Perhaps this is by design, but it has thrown off the spacing of my labels as you can see in the attached chart. While positive data values are displaying centered in their background box, the negative values appear to be shifted to the left.

One other question for you: recent plugin updates do not seem to differentiate between the old and new responsive engines. Is there no longer a need to differentiate between them when deciding which versions of the plugin to apply to an app?

[Kent]

@alex4 I’ve come across a new bug which only seems to be affecting my scatter charts: my custom tooltips are not showing on hover, with the default tooltip being displayed instead. After doing some testing, it looks like the bug was introduced in plugin version 4.38.114 (i.e. the custom scatter chart tooltips still work fine up to version 4.38.113). Can you take a look to see if something obvious is causing this on your end?

Update: another issue I’ve identified related to tooltips. Previously, when I did not want to present any tooltips on a chart, I would just point the custom tooltip to a dummy id (e.g. “NoTooltip”). With the recent plugin versions, it looks like the default tooltip is showing in these cases. Is there a new way to tell the chart not to present a tooltip on hover for these cases?

[alex4]

Hey @Kent

1. There is no leading 0 in the labels for negative values between 0 and –1. As you can see in the screenshot, a value of –0.33 is displaying as “– .33” while a value of +0.33 is displaying as “0.33”. I would prefer the leading zero to show in both cases (i.e. “–0.33”).

I just pushed an update that adds a zero before the decimal for consistency.

2. There is now a space between the negative symbol and the data value (i.e. displaying “– 0.33” instead of “–0.33”. Perhaps this is by design, but it has thrown off the spacing of my labels as you can see in the attached chart. While positive data values are displaying centered in their background box, the negative values appear to be shifted to the left.

I’m not able to reproduce this one or the one associated with the tooltiops. Can you share a link to your editor via a PM so I can take a look?

---

@christo1 I’m looking into the print issue. Not able to figure out what the cause might be yet.
Keep you posted

[ilangutman]

Thanks @alex4 - just upgraded to 4.38.114 but it the x-axis labels still overlap.

What would you recommend I try next?

[alex4]

@ilangutman hmm strange, which chart type are you using?

[ilangutman]

@alex4 I’m using a stacked bar chart

[Kent]

@alex4 I upgraded to the latest plugin version but it did not (initially) fix either the missing leading zero or the alignment issue. However, I then recalled that I had put two “space” characters (i.e. literally hitting the spacebar twice) into the “Unit Before the Label” and “Unit After the Label” fields to create some padding between the label background and the label value. After removing these spaces from the Unit Before/After fields, the label is showing properly. I’d still ideally like to add some space between the label value and its background, so is there another way to set some padding?

[alex4]

@christo1 I just pushed an update in v4.38.118 that should resolve the print issue. Can you take a look and verify that that’s the case on your end?

————-

@Kent let me look into that request. Will let you know if I think of a solution to that styling customization

————-

@ilangutman ok, confirming I can’t reproduce that issue for stacked charts. Could you PM me a link to your editor so I can take a look? Thanks!

[christo1]

Hi Alex, I just updated my plugin, cleared my cache and tried again. Unfortunately the print issue remains in place. It only seems to affect Windows PC’s and not Macs.

[alex4]

Hey @christo1 hmm strange, you’re on v4.38.118?

I’ve tested with both Mac and PC and this is the print view I get (before the most recent update it I was able to reproduce the issue you were reporting)

What browser are you using and which charts are on your page?