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

Update 1.7.0

1 - Charts with empty/null values (in Y-axis data) will not cause errors anymore (on hover).

Don’t forget to refresh your editor after upgrading.

3 Likes

Hi @Thimo,
I am trying to create sales over time chart. I have orders table with total invoice amount (number) and their creation date (date). I tried to feed the chart with these two data sets but it doesn’t work.

To my understanding, I need to convert date data type to text, feed the chart with list of texts. In the demo editor, I see that almost all of the charts gets their time data set through “Year” field which is a text field.

Is there a way to feed charts with a regular date field or do I need to have a field in my tables that is type of text but represent the date value of the transaction?

This is great, makes me want to make an app with graphs, just to play with it :slight_smile:

1 Like

Yes the X-axis expects a list of texts, but it is really easy to convert your list of dates to a list of texts. You can use the ‘:formatted as’ operator in Bubble to convert any data type to a text. So, you expression could look like this: ‘Do a search for data’s date:formatted as 4/15/2020’. :slight_smile:

Thank you @Thimo, this worked well. However, I couldn’t manage to show total sum per each day. For example, I have three transaction on 3/4/2020 and they all show as separate data points in the chart. Any idea how I could show the total sum for each day?

Yes you can achieve this with a grouping. I will send you a pm with an example!

Dear Thimo,
This is a very nice looking plugin.
Will you add radar charts/spider charts in a future update? If so, when?
Thank you !

1 Like

Hi @TomG! I have actually worked this week on a very big update that will include the Radar chart element! I will release this update this week or the end of next week. I will create a post in this thread to let you know when I do :slight_smile:

2 Likes

Hi Thimo - I am also interested in using groupings for the main data field - but can’t seem to make it work. I get an error that it should be a list of numbers, but is instead a list of groupings. Is there a way to do this?

1 Like

Hi Thimo,

Can this plugin shows negative value below the horizontal axis for bar chart? something like this?

@j111 I will send you some examples of groupings via PM! It seems that your are forgetting one last step.

@hello.plannwin Yes the charts support negative values! This is an example of the bar chart from the demo with partly negative values:

Hey mate, out dashboard looks awesome. Out of interest, what API Service or Plugin are you using to connect users with their bank accounts and do you have this up and running yet?

Thanks for your time.

Brett

Plaid. Also testing Tink.

1 Like

That’s great. Thank you @Thimo!

Hi Thimo,

Been playing with the plugin and can’t seem to get it to work correctly. On your example it show a nice padding between the bar and the horizontal line at the bottom. On my chart it’s squeezed together (see pic).

Also some other issues I noticed.

  1. Can’t seem to have a comma for thousands. ie $100,000 instead of $100000
  2. Some x-axis label show some don’t.
  3. is it possible to have multiple colours for bar chart? eg. Green for positive and red for negative numbers?

Thanks

I noticed that too. This is a bug with ApexCharts.js where the data labels behave weird with negative values on bar charts. I have submitted a bug report so I am waiting on a fix for that :slight_smile: . For now I would recommend not to use data labels on bar charts that could have negative values.

The padding you see in my chart is probably because I have the dropshadow enabled, maybe you could play around with that feature. Advanced formatting on Y-axis is a great idea for a next update. I will also look into the possibility for multi color charts!

been playing around with it and I think this plugin just doesn’t like negative numbers.
I tried increasing the shadow and it still squeezed against the border.
having all negative numbers the y axis label doesn’t show correctly.

Yes you are right, negative values behave weird with bar charts. I have submitted another bug report for the Y-axis problem. There is no option though to change the padding between the bar and the x-axis. If ApexCharts.js provides the option I will definitely implement that.

ok so there’s a bug with the data label. If you have two or more labels with the same name. Only one label will show even though the value is displayed.

I have send you a pm!