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

Hi @alexandre4, great to hear that you are enjoying the plugin!

Unlimited data series for the scatter chart is not something that could be implemented I am afraid. I will take a deeper look for you, but I don’t think it will work.

Multiple data series for the radar chart is something I want to try to implement in the coming weeks though! So that is something I will definitely look into and with positive results I will include it in the next update! :slight_smile:

Hi @Thimo, thanks for your fast answer ! Cant wait for the next update :slight_smile:

Happen to have a horizontal box and whiskers chart on the roadmap?

Hi @howard.lothrop! As far I know ApexCharts.js doesn’t support a horizontal box and whiskers chart (yet). If they end up implementing something like that in the future I will definitely take a look at it!

Could make a candlestick google chart with a vertical orientation

https://developers.google.com/chart/interactive/docs/gallery/combochart

Need an HTML element and to use a workflow event of run javascript to put the script in

Update 4.5.0

1 - The radar chart now supports up to 4 data series! @alexandre4

Radar chart multiple series preview

2 - Legends are now supported with radar charts

Don’t forget to refresh your editor after upgrading

2 Likes

OMG! I love this plugin so much!

1 Like

Great update, thanks @Thimo !!

1 Like

Just bought the plugin and loving it so far!

There seems there’s a lot of empty space that’s wasted. Way too much padding. Hard to position my own labels as a result.

With legend:
Screen Shot 2020-07-20 at 11.23.19 AM

Without legend:
Screen Shot 2020-07-20 at 11.23.45 AM

EDIT:
Here’s another example of that naaaaasty padding on the top:


*added the border to show the padding in question. I removed the toolbar, etc and nothing.

Please note that on the design, my label is flush with the graph. Any way I can control that padding?

Hi @alejandrowunderlich!

You can use these fields to control the padding: :slight_smile:

If you are not using the legends for example, you can also enable sparkline to optimize the chart for smaller spaces:

2 Likes

Hey thanks for the fast response. Love that padding option, however, it doesn’t seem to do much:

image

Top and bottom padding is at 0 here.

The space you are seeing now is for the labels so they don’t get cut off. If you enable sparkline it will fit inside your group like this:

Notice here that it will hide the labels on the axis. You can see this chart on the demo page (editor is public)

I will recommend that you play around with these options to create the optimal chart for your use-case :slight_smile:

2 Likes

@Thimo

Great plugin. I was thinking of using it for an app but hit a snag.

  • In a scatter chart, would it be possible to trigger an action on hover (along with exposing the x/y values)?

The flow I’m thinking.

If I have an action that triggers on hover (which gives me the x/y), I can move a drag/drop group there and have the tooltip fully customizable with buttons. (each point in my scatter plot is quite special)…

Thanks

ZubairLK

2 Likes

Hey thanks for the reply. I get the idea of sparkline, tough it’s too hardcore. I want less padding, but keep the labels. Labels are especially important for mobile (the chart you show benefits from mouse-over labels).

I’ll leave the suggestions here: option to also remove and collapse the label that you showed.

1 Like

Hi @ZubairLK! The current version of the plugin doesn’t support actions on hover. I will take a look into it if it is possible to do something like this, but I am not sure.

@alejandrowunderlich These mouse-over labels are also accessible on mobile (using touch, e.g. clicking or dragging on the chart), but I agree that fixed labels could be better in some use cases. I will look into if I can decrease the padding more! :slight_smile:

Update 4.6.0

1 - Added the ‘Name offset’ and ‘’Value offset’ properties to have full control over the label placements for the radial chart.

2 - Added separators for the chart properties inside the Bubble editor for all the charts to make it less cluttered.

3 - Fixed a bug regarding the legend font color of the Radar chart.

Don’t forget to refresh your editor after upgrading

1 Like

Hi Thimo,

These plugin charts look very neat! I have a few questions before can start working with it:
-My data comes formatted as JSON from an external cloud server. Does this plugin accept JSOn formatted data? (I am new to this, might be a basic question, we are setting up the APIs and hoping to push the JSON formatted data to platform.)
-are there also horizontal bar charts?
-does the plug in have filters? (e.g. I need a bar chart that will display data depending on whether user selects Type A, B or C?). Can the filters also be set up outside of your plugin with buttons in the bubble workflow?
-most of my charts have time series data for a whole year. The initial view is data shown by month . Then I have a view where data is shown by day. Your zoom function is great for the day chart as it would otherwise be overwhelming to users. My question: Is there perhaps also an option to go from month to day aggregation in THE SAME VIEW through zooming?
Thanks for your insights!

1 Like

Hi @ria! I have answered your questions below:

1 - The plugin doesn’t accepts JSON data. It accepts a list of numbers (Y-axis) and a list of texts (X-axis). But depending on what API you are using with the Bubble API connector these arrays inside your JSON are automatically transferred as lists.

2 - Yes, when you are using the bar chart there us an option to turn it into a horizontal one!

3 - The plugin doesn’t have filters, but you can use Bubble to filter your data.

4 - I am afraid that such a feature is not available inside the plugin.

Let me know if these are the answers you are looking for.

1 Like

Thank you for your quick reply. Very helpful! For the first question: We are creating our own RestAPIs to send results of data calculations from AWS to bubble. I am completely new to setting up APIs and connect it to bubble. If it is not too much to asked. Do you know of any documentation, public examples etc that connected API data to your charts?

@ria The only example of an API with the plugin is with the candlestick chart on the demo page that uses real time Bitcoin to USD data. The editor is public so maybe that could be useful to you :slight_smile:

1 Like