Forum Academy Marketplace Showcase Pricing Features

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

Hi @fr.duhamel,

I will send you a PM so we can take a better look at the problem you are having!

Hey,

Quick question. Why can the pie charts no longer have the legend at the top?

Hi @dr712406,

Thank you so much for flagging! I pushed a fix for this (6.3.1)! :slight_smile:

Don’t forget to refresh your editor when you have updated.

Hi @Thimo,

This plugin is great, absolute game changer!

I’m having an issue when trying to populate the charts (area/line/bar) directly from an API.

My API data returns as below:

My Chart Series Data & Category are “close” & “Date: formatted”
image

My Charts are producing the correct data however the data is being plotted from most recent - to oldest.

Are you able to advise how I can get the charts to present the data in date order (oldest to newest)?

I have tried sorting the dates in the series category, however this just rearranges the x axis labels without changing the plots on the chart.
image

Any help on this would be greatly appreciated.

Thanks
J

Hi @j.gow

You will have to sort both the series data and series category the same way. For example:

Series data: FMP-MTD’s historical:sorted(date)'s close
Category data: FMP-MTD’s historical:sorted(date)'s date:formatted as 1/17/21

Thanks for the rapid response!

This worked perfectly
I’m a little bit ashamed of how many incorrect things I tried without realising it was that simple haha

image

Thanks!

1 Like

Hey @Thimo, do you have any updates on this?
Also, do you have any suggestions on how to create a chart like this?

You can see it live here: https://celsians.com/cel-market-depth/

Thank you!

Hi @bralca88,

I have definitely looked into the support for multiple axis for the plugin. Unfortunately, after multiple tries I didn’t find a good way to make it work :slightly_frowning_face:

A chart like that is not (yet) supported by the ApexCharts.js library. If a chart like that gets added I will definitely implement it inside the plugin!

hi Thimo,

Still very happy with this plugin. One question/issue I have is however the following:

The Legen is showing “Null” when there is no “Series data” for the charts that have multiple “Series data” fields. I have charts where the chart will display the user’s data. And that can sometimes be 4 data feeds but sometimes only 3 (i.e. all 4 fields of the chart have a “Search for” but sometimes some of the searches does not have any data to provide. I hope that makes sense without going into too much details.

asd

I tried to work around this with Conditions but to no avail. Am I doing something wrong or is this a known issue? Long story short: Can we just hide a Legend Label point when there is no data?

Hi @Pat,

Not sure what causes this, but it seems like that there is no ‘Series name’ value for this data series. When there is no value provided for the series name, it will display ‘null’. Could you check if this series has a value for the series name attached to it?

2021-01-22 om 12.59.22

Hi Thimo, thanks again. I should have made this more clear. Everything is dynamic:

And it’s simply just the case that “Search for Datapoints: first items CI_Question” returns 0 for Series 4 data and name (because the user did not collect any data there yet).

Now my idea was to make this conditional and just leave it blank. But unfortunately that is also showing “Null”. See what I mean:

image

Hi @Pat,

A solution that might help is to change the dynamic series name of the data series so that when there is no data, a user friendly name is being displayed (instead of null). You could for example use a custom state for this. I will also look into if I can automatically hide empty series, but I am not sure if I can make that work in all cases.

Yes, for now I have a condition which changes the legend to something like “No data available”. There is however one bigger issue with this: Apparently, the user can disable data series by clicking on the Name in the legend, which is a great feature. However, if the user disables all data series plus the one which does not have data, the entire chart disappears (when all 4 data series exist, this does not happen)

I have copied your setup and I could replicate this issue (disappearing legend). I just fixed this and I will push the update ASAP for you! Thank you for reporting this.

EDIT: Update 6.4.0 is live!

2 Likes

Awesome man! Sorry keep coming with the questions…any chance you can give us the possibility to define a background color for the legend? It’s sometimes difficult to find a good spot where the Legend really pops out of the rest of the chart

Hi @pat,

I am not really sure if this is supported, but I will look into this for you!

hey @Thimo! Any way to remove the side padding inside the chart? I’m trying to make a small 24px chart to place in content cards

Example:
image

Hi @joe5 ,

This is already possible! I have created a demo for you here: https://bubble.io/page?type=page&name=smallradial&id=designpreview&test_plugin=1609414605804x632849786004570100_current&tab=tabs-1

In this demo I have used a negative padding and used a hollow size of 10. I also disabled the legend, toolbar and label values :slight_smile:

thanks so much!

It seems pretty straight forward in JS.

What are the issues you are facing? Maybe I can help
I’ll try to implement it myself using the JS toolbox plugin.

I really need the multiple yaxis scales :slight_smile: