Forum Academy Marketplace Showcase Pricing Features

[New plugin] Beautiful Customizable Charts and Graphs (ApexCharts.js)

Update 5.0.0 - 2 new charts!

1 - Added the ‘Polar area’ chart!

2 - Added the ’Treemap’ chart! This chart supports multiple data series and you can append unlimited more series using workflows.

I have updated the demo page so you can see these charts in action:
Area polar & treemap preview

3 - Added the ’Monochrome mode’ for the Polar area, Radial, Pie and Donut chart! This will use the specified monochrome color and change the shade to a lighter one for every data point. This way you don’t have to manually specify a different color for every data point.

4 - You can now specify min and max Y-axis values for the Radar chart.

5 - Improved the way the charts handle custom states.

1 Like

@Thimo does your plugin offer the ability to create area, scatter, or bar charts where the marker can be a custom image? Here’s an example of what I’m trying to achieve.Screen Shot 2020-10-27 at 4.46.39 PM

Hi @trygumball, using custom images as markers is unfortunately not supported by the ApexCharts library at this time.

1 Like

Hey Thimo, is it possible to have two different scales in the same chart?

For example I would like the Series 1 to show values in $ and Series 2 show values as %. If I do this now using an area chart the % line will be flat compared to the $ line because of the scale difference.

Any solution?
Thanks

What I am trying to do is to compare different sets of data to have a visual clue of a correlation. So it would be very common to have different scales and each chart should be displayed according to its scale. Like this for example:

1 Like

Hi @bralca88, the current version of the plugin doesn’t support this feature. I will look into this for you to see if I can implement something like this in future updates for you because I think this should be possible. This will be a somewhat complex feature to integrate though, so I can’t give you a timeframe for this.

Thanks!
I am looking forward to having this feature in the plugin!

Hey @Thimo, is it possible to do annotations in the charts? Or directly edit the JS to do this? I’ve attached an image of what I’m looking to do

1 Like

Hi @jvermey, annotations are supported by the ApexChart JS library, but not implemented in the plugin at this time. This may come in a future update, but I can’t promise that at the moment. I will definitely keep it in mind!

love the plugin/library and second annotation support!

1 Like

@jvermey Initial tests look promising and I think that I can include it in the coming update! :slight_smile:

ezgif-7-3658ca6cac52

1 Like

Thanks Thimo! That looks great, will the annotation be able to have multiple sections?

@jvermey I am not exactly sure what you mean with multiple sections, do you by any chance have an example? :slight_smile:

Yeah, I was thinking something like this.

You can have unlimited annotations in a chart, so you can create multiple annotations to get this effect. I am not sure if using 1 annotation and dividing it up in sections is supported, but I will look into that.

Update 5.1.0 & 5.1.1

Added annotation support for the Line, Area, Area - multiple lines, Bar, Bar - multiple bars, Scatter, Radar and Candlestick chart! The demo page is updated to see it in action:

Annotation preview

Hi @Thimo, thanks for this amazing plugin !

I’m trying to do something with the Area / Bar charts - multiple lines, but I can’t find how to do it. Here’s a small description of what i’m trying to achieve:

  • My users are creating several projects, in which they will follow a bunch of data over time. So on each projects, the number of data to follow can be different, as the user choose what they want to follow or not. (For example, on one project the user will track it’s purchases of chocolate and butter, and on another project, he will track its flour purchase.)
  • Each project have a “dashboard” page, on which the user can see on a single graph the evolution of the data over time (its purchases in the example).
    So it means that the number of data to track on the Y-Axis will change regarding the project. And when I check on your graph, it seems that I can’t plug a “list of data” on the graph. I have to specify a source for Series 1, Series 2, etc… meaning that it will not be adapted to the number of data to track in the project.

Do you know if there’s a way to achieve that in your graphs ?
I hope I was clear in my description.

Thanks again for the work you’ve done, that’s amazing !
Best,
Thomas

Hi @thomas.guyot , great to hear that you like the plugin!

If you understand correctly you want to dynamically generate series for the multi-line charts. A way to do this could be to use the ‘append data series’ workflow action when the chart is loaded. You will have to make sure that the chart at least has one data series to begin with and you can append the other series via workflows. I have made a demo for you here:

DEMO: https://pluginpreview.bubbleapps.io/version-test/test1
EDITOR: https://bubble.io/page?type=page&name=test1&id=pluginpreview&tab=tabs-1

Hopefully this will help you.

Hi @Thimo,

Thanks for this plugin, truly a lifesaver.

Not sure why, but the grouping suddenly is off. it’s not skipping empty groups even though I disabled "do not skip empty groups’. and the chart cuts off at every empty group, check it out below.

image
image

Hi @amna,

This is normal behaviour when you have null/undefined values in your data series. These values are sometimes present in groupings. Make sure to disable ‘do not skip empty groups’ in all your data series (including the category series). If these null/undefined values are still visible than it is likely that there are empty/missing values in your data.