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

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

We have a bar chart with one series. We want the user to select items in the chart (by clicking on the bars) and open a new chart that will only show the selected items. It is essentially filtering of data. Is that possible with Apexcharts? If so, how does it need to be set up?

1 Like

point 1. thanks for clarifying about the automatic list creation. Our API data is returned correctly in the plugin.

1 Like

Hi @ria, selecting multiple bars is not yet a native feature within the plugin. I will look into if the ApexCharts library supports this feature but I am not sure. The plugin returns the values of the specific bar that is clicked, so maybe you can use those. The bar chart from the demo page does this, so maybe you can look at the editor and use that information to integrate inside your app. :slight_smile:

Hi Thimo,
Great job thank you! I subscribed!
Just a quick question is there a way to specify number of decimals to show on radial chart ?

Take care!

Steve

1 Like

Hi @ambassa.steve! The library automatically rounds the values for the radial chart. There is sadly no option to specify the decimals (as far as I know) for me to implement.

Hello, I have a list of things that contains a number value, a label and a color code. Would it be possible to use these color codes from the thing on the pie chart? or do the colors need to be predetermined? Thanks!

1 Like