Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Simple Charts

Update in v2.41.16: Bar/Line Chart Animation

Previously, the Bar/Line Chart element did not animate if you added the series values in the element properties (meaning you’d need to add them via the workflow actions to get the Bar/Line to animate). Now, the Bar/Line animates when the data is loaded! I’ll be adding this feature to the other chart types in the days to come.


Update in v2.43.0: Rounded Corners for Doughnut Charts!

You can now round the corners of each section for Doughnut Charts. You have three options:

  1. Square Section Corners
  2. Rounded Corners (All Sections)
  3. Rounded Corners (Single Section)

Here’s an example of this in action:

That’s sick bro. I love that nice styling! Is that css or a built in chart library function?

@alex4 I just purchased your charts plugin and I’m trying to create my first chart (a donut chart in my case). I have the chart working with dynamic labels and dynamic values without any problem, but I can’t seem to get dynamic pie chart colours working. I need dynamic colours because I always want to tie the same colour to a particular category in my pie charts but depending on the context, certain categories may or may not be included in the pie. In testing, if I put a static list of colours in the field (e.g. #4A86E8,#E8685E,#EA4335,#EA958E,#D7B0C3,#D57DA8) the chart loads fine, but if I change the field to reference a string created by doing a “search for…” and “format as text”, my chart doesn’t load - all I get when previewing my app in debug mode is a “General Error” without any other helpful clues.

Here is a screenshot showing my chart’s properties in case that is helpful. As you can see, in this case, the dynamic “search for…” and “format as text” has generated the string of hex codes and it looks valid to me.

I am in need of some help please! I am trying to merge two lists together from a dynamic date range. Here is what it looks like currently. Ignore the dropdown, that will modify which metric is currently in view.

The repeating group on the left is the list of data showing how far the athlete ran in meters on a training day. The middle repeating group is a list of dates in sequential order. The repeating group on the right is the two lists merged together. I cannot figure out a way to show the repeating group on the rights data in the chart and have it align to the proper date. @alex4 let me know if this is possible and how to accomplish. Thank you and I love the plugin outside of my current frustration!


@jared.gibb thank you :slight_smile: – it’s a custom extension for the library that I added!

@Kent and @tom8 I’ll take a look at your questions can get back to you by Monday!


@Kent thanks for reaching out! Would you mind either sharing with me a link to your app in a DM or adding a text group to your page that refers to the dynamic colors expression and sharing with me what the text string is?

My suspicion is that your colors might be saving as rgba (instead of hex) which has commas in it (e.g. rgba(255, 255, 255, 1) which is throwing off the logic in the plugin that uses the comma to separate between colors.


@alex4 Here is a screenshot showing the resulting string of my dynamic colours expression when the app loads:

In case you need to copy/paste the result for testing, the string is #4A86E8,#E8685E,#EA4335,#EA958E,#D7B0C3,#D57DA8 which matches character-for-character with the static value that I was initially putting directly in the pie chart colour field (with the chart loading fine) before trying to make the colours dynamic.

Based on this string, it seems that the hex codes are being loaded properly rather than anything related to rgba format.

For reference, here is how I’m building the dynamic colour string:

  1. I have an option set called Asset Classes and each Asset Class has an attribute called “Colour” in which I store a hex code (e.g. #4A86E8).

  2. When building my pie chart, I do a search for Portfolio Allocations which returns a list. I then do a “Format as Text” on this list to build a string based on each Portfolio Allocation’s Asset Class’s Colour, using a comma as the delimiter.

On a completely different note, I see that Charts.js supports multiple series for pie/donut charts. I have a need for a pie chart with two series, so I’m wondering if this functionality could be added to your plugin? I assumed it would be supported since it was part of Charts.js but I should have thought to confirm this before purchasing your plugin.

Hey @Kent thanks for the additional info!

  1. Tried using the setup that you’re describing to reproduce the issue but it still looks fine on my end. Could you DM me a link to your editor? I want to make sure everything is set up the same.

  2. I’ll take a look at the multiple series request for Pie/Donut Charts – that feature certainly makes sense. Will keep you posted.


Hey @tom8 – it looks like some date have corresponding distance values, others don’t, and you’re trying to skip the dates on the graph that don’t have distance values. Let me know if that’s a misunderstanding. If that’s the case, which chart type is this?

If it’s Bar/Line you might want to try using Scatter (this can take in date values on the X-axis) and set “Connect points?” to true. Let me know if that works at all!


@alex4 I am trying to show all dates, including the dates when the Total Distance is 0. I tried to setup the scatter chart as you recommended, and I can’t seem to get the values to show up. Here are the exact settings I am using. As you will see after the chart setting pictures, I attached images of the data that is loading, but not showing up. Thanks in advance for your help!

Let me know if there are more details that I can add. Thanks again!


@alex4 I sent you a DM with additional details. I also did some additional testing and realized that the issue relates to the fact that the datasource for the dynamic pie chart colours changes based on a selection I make in a dropdown element. This dropdown element starts with no value (i.e. the dropdown is blank) and that was causing the Bubble error I was encountering. I was able to resolve the error by setting the pie chart colours field to a static value and using a conditional on the chart element to change the pie chart colours field to a dynamic value only when the dropdown’s value is not empty. This worked for my needs but it might be helpful to build in some kind of error checking to the underlying plugin code for the case where the pie chart colour field is empty to avoid a Bubble error for others. Let me know if you require any additional info for me to help with this.

Sending you a DM to look into this @tom8

Hi @Kent — thanks for those additional details. I’ll add it to my backlog to handle those cases more gracefully. Will probably get to it next week!


@alex4 I’m trying to incorporate a boxplot chart into my app but I’ve run into an issue with the chart data running off the “viewable” area on a large screen. When my window/screen is smaller the chart fits properly, but as the window/screen increases, the chart expands horizontally (as desired) and becomes relatively short and wide; however, the chart plot area is not adjusting its height in response, so much of the data ends up off the viewable area. Here are two screenshots of the same chart in 1) narrow and 2) wide views:

1) Narrow

2) Wide

I have a scatter plot chart on the same page of my app (with similar dimensions) and don’t run into this issue with it (i.e. the scatter plot chart resizes the plot area to fill the space allocated to it), so hopefully this is something that can be fixed for the box plot chart as well.

Also related to the boxplot chart, it is my understanding that I am supposed to enter all underlying data in the Y-values field and the plugin will then calculate the Min/Max and quartile values on its own. In my use case I am dealing with expected returns for investment portfolios, with the min/max/quartile values generated from a separate Monte Carlo simulation process, so it would be really helpful if I could simply enter the 5 values for each boxplot rather than the plugin trying to calculated things for me. Is that something that could be added to the boxplot chart?

Thanks again for your help!

@Kent thanks for sharing the feedback on the boxplot chart.

I’m able to reproduce the issue regarding the dimensions. Will take a look this week and get back to you.

I’ll take a look at your feature request regarding entering the min, max, quartile values as well (instead of having the chart enter those for you). In the meantime, are you able to simply enter those 5 values in that field and have it calculate the same values? In theory the min, q1, media, q3, max values would be calculated as the same values. Let me know if my math is off!

Also, I created a new thread for this plugin since this post is from a couple of years ago so I’ll continue the conversation on the new post here: [Plugin Update: 2021] TechBlocks Charts and Graphs (Chart.js) - #3 by alex4


@alex4 thanks for the quick response. I did a quick test with just entering the 5 values into the Y-values field and they do indeed map to the 5 boxplot values as you described (sorry, I just assumed this wouldn’t be the case). However, a new issue came up when testing this: I am entering values with decimal points (e.g. -2.45, 3.35, 5.60) but they are being rounded to whole integer values (e.g. -2, 3, 6) on the boxplot. Can the plugin be enhanced to provide a greater level of precision, or perhaps there is already a setting that controls this that I’m missing?

Thanks again and I’ll post future feedback/support questions in the new thread.

Hi @Kent thanks for pointing this out!

This was a bug – I just updated the Boxplot charts to handle decimal values as well as integers. Once you upgrade to v2.43.3 of the plugin it should be working properly. Let me know if you notice otherwise!


@alex4 I can confirm that v2.43.3 fixed the integer rounding on boxplots for me. My only outstanding issue is now the unresponsive dimensions when a boxplot chart is not a perfect square (as discussed a few replies back in this thread). Hopefully that can be addressed in the near future so I can push this additional chart type into my production environment. Thanks as always!

@Kent thanks for confirming. The dimensions issue is a bit of a stubborn one – still working on it and will keep you posted.