Forum Academy Marketplace Showcase Pricing Features

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

Hello @Thimo,
We love this plugin. It’s worked amazing for us so far.

We ran into an issue lately though. Our graphs on our dashboard page used to update automatically if you kept the tab open and new data entered into the database. However, the charts no longer update when our database gets updated. We have “Enable Animation” checked but it still doesn’t seem to update. Any ideas?

Thank you,

Brett

Hi @brett4 This is odd! I will PM you so we can go into more detail!

Hi Thimo,
Would it be possible to add a dark mode for the heatmap which colors low-valued grid-spaces with a dark shade rather than a light grey?
The light grey heatmap looks quite odd when using a dark color scheme.

Hey @Thimo where can I find a scatter datetime chart?

Hi @paulogustavopeixoto!

The plugin has support for a ‘numerical’ scatter chart and not yet a ‘date-time’ one! I see that there is a chart like that supported by the library, so I will put it on my list for you! :slight_smile:

1 Like

Update 6.55.0 & 6.56.0

1 Like

image

@Thimo
For dynamic marker colors, is there a way to get the “This marker’s value” so that I can change its color depending on the value?

@Thimo
Hi. when it starts ‘show a popup’ and ‘hide a popup’ workflow, every charts and table/grid ( I also using table/grid made by you) reload and this makes my app so slow. (I’m using external API for the data source, for your reference)
Do you know why this problem happens?

@alejandrowunderlich Right now you can only specify 1 color for the markers, and not yet a list of colors.

@yongjun Bubble re-renders the element everytime changes are made (e.g. screen resized, element shown, data changed etc). If you want more manual control over when the element re-renders, you can check the following checkbox for both the Chart and Table plugin. When you do this you can manually re-render the chart by using the re-render workflow action:

Chart:

Table:

Note: it also could be that your API is slow (maybe you are loading too many items). In that case you may want to save your API response to a state. That way it doesn’t update everytime.

My x-axis labels are being cut off like so:

This occurs with every update including and after 6.52.0 Fixed the rotating and overlapping labels bug. I tried adjusting the height of the chart as well as the font size of the x-axis label but to no avail.

@sydney22

Could you try to disable the trimming of the labels to see if that fixes this? →

Hey @Thimo - for charts where we want to display data with a lot of different categories, is it possible to add a horizontal scroll to the bar chart? similar to this chart but for a horizontal chart

@Thimo That helped a little, but my labels are rather long so it flattened them out horizontally and reduced the number of ticks resulting in significant overlap.

I wonder if this is happening because I’m using the legacy editor- is it possible to still accommodate it?

The labels should be automatically hidden when overlap occurs. You can manually reduce the number of ticks on the X-axis to make sure your labels don’t overlap. Does that work for you?

1 Like

This is not natively possible right now. But, using the new responsive editor, you can give your chart a relatively large height and give the parent group a fixed height. If you enable ‘allow vertical scrolling when content overflows’ for this parent group, this group becomes scrollable. You can even improve this to hide the x-axis and create your own x-axis below this parent group so it does not scroll with the chart.

Hi @Thimo, yes the labels are hidden when I don’t set a tick amount value and trim is set to “yes”. When I do have a tick amount value and the trim is set to “no” there’s significant overlap (even if the tick amount is something low like 5).

The change happened around the time the plugin was adapted for the new engine. I’m on the legacy engine since I’m still making the transition to responsive and it’s taking some time.

so if i wanted to do this for s horizontal chart, i could just take your suggestion and switch it to have a chart with a large width and a parent group with a fixed width?

Hey there @Thimo - all of my charts show an error in the console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')

You can see for example here: Collection: Wolf Game - Wool Pouch

I have checked the data and it all seems cool. Also, I am on 6.55, anything newer the line in the chart disappears (though everything else functions). Any ideas?

Solved it! For anyone with a similar issue - the root cause was that the chart was trying to render without any data available (which is strange since it does display properly on the page).

I noticed that the charts with the issue were getting data from a js script which was running asynchronously. When i make the chart not visible, but only visible once the data is available things work without error (and I can upgrade the module too!)

Actually, maybe I spoke too soon. @Thimo production (old plugin) renders ok:

https://tracktradecrypto.com/collection/moonbears-nft

But the new plugin does not:

https://tracktradecrypto.com/version-test/collection/moonbears-nft

Any ideas?