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

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
CleanShot 2022-09-16 at 10.59.40

@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?

Yes that should work I think!

It is hard for me to see what’s happening. You are using custom code in the page inside a different plugin right? It is hard to find the exact cause when multiple plugins are used at the same time. Just to be have a better picture, are you still using the old responsive engine for your application?

I have javascript-to-bubble plugin running some javascript that outputs the data to be charted.

That all seems to work, and if you hover over the chart you can see that values are there - but the line doesnt display.

How can I check which responsive engine I’m using?

I have send you a PM with some additional details!

Is there any way to have more than 5 possible colors for donut charts? My app can have up to 10 segments/data points and it’s just repeating the 5. Ideally I’d like to give it a dynamically created list of colors, as many as I want? If I have more colors setup than there are data points it would just ignore the later colors.

Hi @dev57 right now, you can’t supply a list of colors for the donut chart. I have placed the feature on my list to include in a future update. For now, you can use the monochrome feature to use different shades of a color for every data point: