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

Hi Thimo, got a question on the Radar Charts. I have a couple of products with various categories scores. So when a user clicks on a product, I would like the category scores to be displayed as a radar chart. Any idea how to build that? Currently, the radar chart design seems to allow the display for only one product and the categories.

My Product Rating:

Product Ranking

Thanks!

Hi Timo!


This is how the chart looks, it shows the balance on account on each day. When user adds new transaction, the chart does not re-render. Even if I add the step at the worklflow to re-render the chart, the arealine disappears and emerges like if it would re-render, but without the new data. This is how the worklflow look like.

Only when I refresh the page I see new transaction and new balance on the chart. Is this a way to fix this?

Also, I would like to make some visual changes to the chart, if it is possible. Maybe you know whether some of them could be done?

  1. Set x-axis to the middle of the chart. Now, if the max balance is 1.000 and min balance is -10.000, the x-axis is on the top of the chart.
  2. Make the labels of x-axis more beautiful. The chart automatically rotates them to 45 degrees and puts “…” instead of the year.
    Bildschirmfoto 2021-12-08 um 12.05.24
    Even if i set “Tick amount x-axis” to 10 or even less so that there is enough place to write the whole date, the chart cuts it off. Is it possible to fix it?
  3. I have tried to make the values above 0 of blue and under 0 of red through conditions, but it does not work as its possible to set only the color of whole dataset, not of particular datapoints based on their value. Could you implement this feature in the future?
    Thanks !

@vienna.opportunities

It could be that Bubble doesn’t refresh this search. You can save your data to a custom state and use this state instead of the ‘do a search’ you have doe the charts. You can update this state accordingly when (in your case) a new transaction is created.

There is no support (yet) for an x-axis in the middle of the chart, if this gets supported I will add it to the plugin :slight_smile:

Will look into this if I can improve this! You could hide the x-axis and make a custom one with for example Bubble elements to have an indicative x-axis that is fully custom. For example this one I made for a project of mine:

2021-12-12 om 17.40.15

This feature is not yet supported by the plugin, but I will look into if I can add this in a future update for you! :slight_smile:

Thanks, this was helpful! I would only like to add that “series 2 name” must be the same as “2nd Y-axis series name”. Then the second y-axis showed up for me!

Is there any way to compress the legend? See image below. There are a lot of options here and it makes the chart smaller. Can I potentially make the legend a carousel or something that the user could scroll through?

@Toby1 in this case I would recommend a legend on the right or left side. When a legend is placed on the right or left side it becomes scrollable when it overflows :slight_smile:

1 Like

thanks!

Hello, @Thimo
Is there any way to build Waterfall Chart?


Thanks

Hi @Thimo

Is it possible to have an option to reverse the direction of the radial chart?
right now it renders clockwise. It would be good to have the option to reverse the direction as a representation of a negative value.

Hi @Thimo - great plugin! I’m working on an area chart with multiple lines and have 2 questions:

  1. Adjusting the Y-axis tick amount does doesn’t change the chart. I did see a previous post about this, but I experience this issue regardless if the y-axis min or y-axis max values are set. Is there any fix for this? The Y-axis tick amount does function properly on the single line chart, but I need multiple.
    image
    image

  2. Is there any way to make data display differently in the axis and toolbar? For example, could you change y-axis to display 0 decimals and have the data display with 1 decimal in the toolbar?
    image

Thanks in advance - I appreciate your help and work on this plugin!

1 Like

@chammer Thanks for flagging! I have just pushed an update (6.41.0) that should fix the Y-axis tick amount issue!

Your second point is not (yet) supported, but I will look into it if I can add it to a future update! :slight_smile:

2 Likes

Hello @Thimo,

I am trying to create a chart whith Apex Chart with date on x absis where the date distribution will be proportional with the elapsed time.
In my example the space between the first date and the 3 others should be much bigger than the space between the date 2 and 4.
But for now it’s distributed equally.

Is it possible ?

screenshot_APEXCHART

Thank you! The update works - thanks for your quick response and support!

@evodev Yes, you should use a date grouping for this. I have included a link below that shows how that works (the demo page also has more grouping examples) :slight_smile:

The Area chart multiple lines has multiple options to handle empty values:

@Thimo Would it be possible to have more than four series in the multiple bar and line charts? I would like to stack up to five series in a bar chart, but I’m having to use a different plugin. Thank you!

@benedict yes you can add unlimited more data series using workflows. You can for example do this using the ‘is loaded’ state of the plugin. I have a demo for you below:

It works, thank you for the quick response!

@Thimo

I have converted my app to the new responsive engine. Besides ApexCharts. Any chance you will release an update for the new responsive engine?

Thank you

@Thimo , anyone already report any plugin conflict, using ApexCharts?

I’m saying this because in my project, i’m temporally using a free radar chart plugin, just to have a design idea, but i subscribed your plugin to test, and the charts literally don’t show up.

Could it be a conflict between them?

The plugin that I’m using is this Radar Chart Plugin | Bubble

@Pat For so far I know, I don’t have the ability to update my plugins for the new responsive engine. I think we should wait till Bubble updates their engine or is out of beta. I did saw a forum topic that they are working on it :slight_smile:

However, current options like the min and max width should allow you to make the plugin fit your app right? I have a demo here: Chartpreview | Bubble Editor

@Newed Two separate plugins could conflict. Could you try uninstalling that radar chart to see if that makes a difference?