Forum Academy Marketplace Showcase Pricing Features

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

Update 6.70.0

Added the ability to specify a list of colors for the Polar Area, Pie and Donut chart:

Awesome work as always! Will it be possible to click on a bar and a popup would appear referencing the record linked to the bar? Thanks :slight_smile:

I’ve got a use case I’m trying to validate to see if this plugin can work for me. I’m creating sql queries using openAI. That query executes and you end up with a table. I want the user to click a button that then generates a graph based on the table that was just generated (I could have it come from an api source; I can’t think of a better way as I don’t think using database would work for this). Another way to ask this is can I let a user modify a graphs source, and that source not be from a database?

I think I’m doing something pretty similar to what you are describing:

This table (also from @Thimo !) gets it data from sql query:

Clicking on a row opens a new page, which has an apex chart populated also by a sql query:

Changing the source would be as easy as defining the appropriate SQL connections in bubble and letting the user pick

1 Like

Yes this is possible. This is a demo for the area chart, but it works the same for a bar chart: Chartpreview | Bubble Editor

The chart source can be what ever you want (Bubble db, a custom state, API call etc) as long as you can provide a list of numbers (Y-axis) and a list of texts (X-axis) that are the same length :slight_smile:

@drfalken Shared a very cool demo you could take a look at (:

1 Like

Thanks :slight_smile:

@Thimo Hey man, I am getting this error: Uncaught TypeError: Cannot read properties of undefined (reading ‘node’). Charts don’t work

Hi @feb0! Thank you for reporting. I will send you a PM so we can take a closer look at the issue you are having! :slight_smile:

Loving this plugin so far, thank you :pray:

I do have one issue that I can’t seem to find an answer to. Is there a way to edit the scale of y axis in multi area chart? example if i have a range of numbers, let’s say 150 - 200, for y-axis values, the auto scale of y-axis looks good. However, if the range is small, lets say between 120 and 121.5, the scale is misleading as the chart zooms in on the y axis and the difference between 120 and 121.5 looks to be enormous. Any advice on how to alter the scale of y-axis? Thank you

apexcharts 1

apexcharts 2

You can set a custom min and max value for the y-axis using these fields:

That way you can control how the y-axis is displayed :slight_smile:

1 Like

thanks! I don’t know how I missed that :man_facepalming:

another question for you: how can I convert a list of dates to list of texts to be used as series category for x axis in multiple area chart? and is there a way to include more information in the tooltip floating group or just data from a single field for the each item in the series?

Please take a look at the demo: Chartpreview | Bubble Editor

If you are using the default tooltip no, but you can use a custom tooltip to display more information (this is an advanced feature, there is an example on the demo page) :slight_smile:

Hi @Thimo I’m getting a bug with the 2nd y-axis data label prefix, It’s carrying over the data label from the left y-axis.

Also, I’m trying to add more than 1 series to the 2nd y-axis, but can’t find how to do this since the 2nd y-axis series field only receives a text. Hopefully you can help me out with this.

Best Regards.

I pushed update 6.77.0 that should fix this issue!

Right now only 1 series is supported for the 2nd y-axis. Instead of adding another series to the 2nd Y-axis, can you not add those series to the 1st y-axis and add the series that is on the 1st y-axis to the 2nd y-axis? (so you end up with 1 series on the 2nd y-axis) :slight_smile:

Hi @Thimo thanks for the update, unfortunately the proposed solution wouldn’t work since I 'might have more than 1 series added to each axis, conditioned by the data unit ($, %, etc). Hopefully this functionality can be added in the short term :slight_smile:

Hi @Thimo!

I’ve been having trouble with the Treemap chart, the Data Labels are too small and don’t seem to respond to any changes in the “Data Label Font Size” configuration…

Here’s a picture with the graph in the size of 600x900.

I’ll be super thankful if you could help me with this one!

Best regards.

@rafael7 The library will auto scale your labels if it does not fit on the chart and that is what is happening here. Your labels a very long and will therefore be reduced in size to fit the chart. Please reduce the number of characters of your labels and you will see that they will be displayed bigger on the chart (recommended is only 1 or 2 words max):

I am having problems setting the single color of the pie chart when reading from a variable. However, when I set it with hexadecimal it works,

What could happen?

@wains Style variables do often not work with plugins as plugins expect a color code. The variables are formatted like --a-variable and I do not have access to the ‘real’ color code in the plugin editor. So that is why I would recommend to not use these style variables with plugins (for now). Does that make sense? :slight_smile: