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

Hey @heyshivamkr! Bubble actually only returns the field you are grouping on + your aggregations (if any). So Bubble does not let you retrieve additional fields after your grouping like your “Promotional email” flag. I can’t really change that as this is a Bubble feature. I am not sure if there is another way to do this in Bubble, but if something comes to mind I will let you know!

Hi Thimo,

I am using the APEX charts plugin to build some charts.

I am having an issue with getting the correct zoom of the cart as compared to the Figma File.

I don’t see a setting where I can adjust the zoom to achieve the same.

Attached are the two images.

Thank you.

Hi @ali8

Not 100% sure what you mean by “zoom”, but if you want to increase the width of the bars you can use this setting for the “Bar Chart - Multiple Series”:

(this is a percentage value between 0 and 100)

Hope that helps!

Hi team, when I create a daily chart that has a lot of dates plotted in a small area. It messed up the appearance.

Ideally, I would want it to only show the dates with a gap of 2-10 days (depending on the number of dates) but the value on the chart should appear for all dates.

Something like this.

@heyshivamkr If you want to group your data by date you will need to use Bubble :group by operator. You can find this demo on the demo page: Chartpreview | Bubble Editor

Hope that helps! :slight_smile:

@Thimo

I have this chart but want to show the value as percent.

They are in database as decimals.

How can I do that?

Formatting as % option turns it into a list of text

Thank you.

@ali8 As you have decimals in your database, can’t you just multiply the numbers by 100 inside your data expression?

For example like this:

Thank you Thimo!

One last thing, any way I could show this as a percent in the tooltip?

image

@ali8 To solve this, I think you want to show the ‘%’ symbol as a suffix right? You can do that here:

2 Likes

Hi Thimo,

I want to add spacing between the two bars like in the second image (see attached).

Is that possible?


Hi @ali8, thanks for the feature request! Right now this is not supported by the library, but I have opened a ticket on Github for this feature to see if it can be implemented: Add 'Gap' Property to Bar Plot Options · Issue #4706 · apexcharts/apexcharts.js · GitHub. Once it gets supported I will add it to the plugin! :slight_smile:

Hi @Thimo, first of all, super plugin. It seems the data label on the pie chart does not display the configured thousand separator (and the tooltip does). Is it possible this is a bug?

image

image

@gerbertdelangen Yes this appears to be a bug! Sorry about that. I should have pushed a fix in update 6.142.3 :slight_smile:

1 Like

That solved the issue, that is quick, thx Thimo!

Hi Thimo, I am trying to set up Area Chart and have implemented a condition to display first item when a certain dropdown is selected and item #2 when another dropdown is selected as show in the screenshots attached but it is not working. The series name is displaying well, eg it shows the correct data depending on the dropdown you select but the graphs are not showing. Do Apex charts allow this kind of filtering?


Hi @jpeangeles, this should be supported. However, I see that you have quite a lot of conditionals on the chart. Bubble sometimes does weird things when having conditionals on plugin elements. Let me send you a PM so we can take a better look!

Hi Thimo,

Great plugin, thank you so much. I have the below bar chart where the different series represent the number of jobs available on Local, Regional & Longhaul freight routes.

How can I trigger a workflow simply by clicking on the series bar on the chart. For instance I want to be able to click on the LOC (3) bar & have it set a custom state as LOCAL thereby changing the numerous information display panels appearing on the same page as this chart to displaying only LOCAL work statistics, jobs, etc.

I’m sure it’s simple I just can’t find it…any & all assistance sincerely appreciated.

Hi @alexnferris,

The plugin supports an event when a bar is clicked in the bar chart. You could use this event for the functionality you are describing. When the bar is clicked, certain states will be set. You can click on the bars of the purple bar chart in the demo page to see an example:

Demo: https://chartpreview.bubbleapps.io/version-test?debug_mode=true

@ali8 I found a solution! I have pushed a new update (6.142.4) that adds the ability to make the stroke color “transparent” making it function like a “gap”:

You can see this example on the demo page: Fully customizable charts (ApexCharts.js)

Hi Thimo !
Can you tell me how to add padding between bar (be seperate) ? And how to sort data ? I save datas on the right order on the data base , but once on a graph, it seems data appears on a random order. I try to add ‘sort by’ for the category list (I add number range on the title). It works but data series appears completly desorganized (series no longer match the category) and I can’t sort the serie depending category order …

Thank you very much for your help !