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

Hi @Pat

When you have empty values, the charts will not plot data points for these values (like you can also see in the second gab of the example). You could check the box to replace these values by zero inside the plugin l, but you mentioned that that is not the behavior you want in your app. At this time the plugin doesn’t have the feature to automatically calculate the mean between the missing data points and connect them. I did see that there is a feature request for the feature that looks like it is almost ready. So when this gets added to a new release I will definitely implement this option for you as I can see that it would be useful! :slight_smile:

Thanks Thimo. Just to clarify or really drive the paint home. This is important whenever somebody wants to show how one value changed over time.

Let’s say I want to present how much money I have on my account:
January 1st: 100 USD
January 10th I add 200 USD and now have 300 USD
January 15th I take away 100now I have: 200 USD

Between those dates it is not that I have now 0 USD but the account balance just did not change.
I think we are talking about the same topic but wanted to make sure it is clear what I mean. I am just surprised thatt Apex did not have this so far because this is important for many types of apps like stock trading, account balance etc.

Love the possibilities with the plugin, @Thimo !!
A question for you though, is it possible to either a) show only the legend for a chart, or b) fix the height of the chart object within the element and format the legend to fit within the element size?

I have a series of pie and donut charts, but the issue is the # and length of the labels for each value can vary quite a bit. In some cases, with long labels, the legend will grow and shrink the size of the pie. Since I have two pies next to each other in a repeating group, I’d prefer if the sizes were equal.

I can see a solution where I hide the legend in one chart element and only show it in another, but don’t know if that’s possible. Any thoughts would be great!

Yes @pat we are on the same page here!

Hi @dev13! At this time there is no option to set a predefined width for the legend. I am not sure if this is supported so I will look into that for you. Does changing the legend placement to ‘bottom’ (instead of right or left) for example help?

Unfortunately, no, moving it to the bottom doesn’t solve the issue. On the bottom, if the labels are lengthy and/or there is variance in the number of labels, the height of the visualization is shortened to accommodate the legend.

It’s pretty counterintuitive, but having an option to turn off the visualization (but keep the legend on) is a potential solution. The best I can think of is to dramatically separate the visual from the legend, have the ability to treat them separately, but keeping all the data definition parts with the legend so it can be driven by the same data as the visual. To the guy not doing the dev work, that sounds simpler than dynamically measuring the size of the legend and increasing the overall chart element size :slight_smile:

@Thimo Long time user of this plugin and we are struggling with a similar issue. It would be amazing to actually have the ability to reuse the last data value if a value is missing in contrast to just using a 0, which you currently provide via the checkbox option. Not sure if this is something that is possible.

@rivergalli Just tried something out. This will replace null/undefined values by the previous value (or if there is no previous value by 0). See before (below) and after (top):

Will this be helpful?

1 Like

@Thimo yes, this is exactly what is needed!

Update 6.28.0

Added the feature to replace null/undefined values with the previous value for the Area Chart - Multiple Lines. @rivergalli (maybe this will also be helpful for you @Pat )

Don’t forget to refresh your editor after upgrading

2 Likes

@Thimo, awesome! This is working great thank you.

@Thimo or anyone else. I am having a small annoyance with formatting dates getting cut off regardless of the size. You can see everything is formatted as mmm dd. I have adjusted the x-axis max height but it doesn’t seem to solve this problem. Is this a bug or I might just be missing a setting. If anyone has any thoughts I would be greatly appreciated.


image

Hi @rivergalli I noticed this aswell and I am currently looking into this! Hopefully I can find what’s causing it :slight_smile:

@Thimo Much appreciated!

@Thimo

Thank you for listening to feedback and fixing/adding things so fast.
I enabled the feature in one of my graphs. There is one issue I have when using multiple lines:

Data points get merged on the series category (x-axis) when the series do not have the same data point dates. Difficult to explain. Maybe this example will explain it best:

Series 1 data:

January 1st: 100
January 3rd: 200

Series 2 data:
January 2nd: 150
January 4th: 300

The graph will plot all 4 data points on only two dates. Which makes the data wrong for one of the series. But It should be plotted like this:

January 1st: 100 (Series 1)
January 2nd: 150 (Series 2)
January 3rd: 200 (Series 1)
January 4th: 300 (Series 2)

Please note, my search for Series category includes all data points from both series.
Am I doing something wrong or is it just not possible and all data series always have to have the exact same series category data?

The charts look awesome.
Question. Are there standard distribution charts and waterfall charts?

@pat, for this you should use a grouping by date. You can specify a start and end data for a grouping (which should be the same for all data series incl the category data series). In this case the starting date will be January 1st, and end date will be January 4th. This will cause that all data series have the same length. You can see a grouping demo here (note the ‘do not skip empty groups’ checkbox is checked): Chartpreview | Bubble Editor

1 Like

Hi @john36 ! These two charts are not (yet) supported by the ApexCharts library, but when they get supported I will definitely implement them! :slight_smile:

Thank you so much. Your support is awesome. I had figured this out some time ago but because I was trying so many things out I messed up my searches. With gGrouping in combination with the new feature I get exactly the needed result.

Anyone who wants to use Graphs in Bubble, this is honestly the best plugin and best support ever. thanks again

1 Like

This plug-in looks amazing ! I’m trying to see if I can use a donut chart for my app, but I cannot seem to find how to change the data label color ? With the data label offset, the number is out of the donut but the font color is white, so I can barely see anything…
Also, the data is in pourcentage, any way to show the actual number ?

@marie1 I have just pushed an update (6.29.0 & 6.29.1) to let your change the data label font color!
2021-06-04 om 11.34.12

As displaying percentages as the data label is default behaviour from ApexCharts, I implemented the ‘labels’ options for you to display the normal values in the donut chart like this:
ezgif-4-b2b2f1aa36c7


gif)

Don’t forget to refresh your editor after upgrading