Apex Charts Malfunction?

Hi there,

I have a donut apex chart widget.
As its seen in the next images, both data sources have its timeframe as configurable, but it only takes the last value of that data bucket. As the time filter is relative, I’m writing this at 14/02/2024 12:00h.


image image

Apart from this issue, it does not react to the colours specified in each source and I had to add them in the code section:

var options = {
    series: latest,
    chart: {
        type: 'donut',
    labels: labels,
    colors: ['#40acb4','#1E313E']

Also, each time I reload the dashboard, the colours have swapped:

image image

Thanks in advance!

As aditional info, my Server version is 5.3.7


Try selecting the data tag in each tab at the widget’s field.

Also I see you have two different buckets for two different devices, both of them could be stored into the same data bucket (as both share the same resource name), and this makes a better memory usage at the instance,

If you are going to store each device into a different bucket, there is no need to use data tags.

Hope this helps.

Hi @ega,

Thanks for the quick response and advice.
I have just set the tags in each data source in the mentioned widget. However, I have not noticed any change:

I also tried this donut apex chart in a separate dashboard and got the same result.

Thanks for the advice,

The data is separated into different buckets due to the source and parameters each model provides. At the moment there is only 1 device in each bucket, but in a future with multiple ones is the most escalable solution I could think of.

The advice comes from the fact that both devices are uploading the same variable, note that it does not matter if the device is different, if they handle the same variable (or dataset), could be stored in the same bucket to be diferentiated by the device’s tag.

I dont know if this is a bug, I was wondering if you could do the test to change the variable name into one of the devices, just to test how it behaves, by my side I made a quick test and could draw a graphic with the same value name stored in different buckets (without using tags featuire), so I think the situation could be related to the tag usage and the variable name.

Hi there,

Just done a few tests:

  • Works perfectly when configured as everything except donut and pie charts.

  • Changed variable name - still not working properly.

Have been working on my own version of this widget, with its own logic to sum the values, as the donut and pie charts does not work as intended.

        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
            .customDonutWrapper {
                display: flex;
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: center;
                margin: auto;
                box-sizing: border-box;
            #chart {
                height: 85%;
            .loadingCustomChart {
                display: none;
        <div class="customDonutWrapper">
            <div id="chart">
            <div class="loadingCustomChart">
                <img class="LoadingDoorActivityIcon" src="https://...loading.gif">
 angular.module('donutAccChart', [])
.directive('donutAccChart', function () {
    return {
        restrict: 'EA',
        scope: {
            source : "=",
            ts:      "=",
            value:   "="
        templateUrl: function(){
            let url = document.querySelector("script[src*='donutAccChart.js']");
            return url.src.replace('.js','.html');
        controller: ["$scope", function($scope){
            var AccController = 0, AccSocket = 0;
            var options = {
                series: [AccController, AccSocket],
                chart: {
                    type: 'donut',
                labels: ["Smart Light Controller", "Portable Socket"],
                colors: ['#40acb4','#1E313E'],
                legend: {
                    show: false
            var chart = new ApexCharts(document.querySelector("#chart"), options);
            $scope.$watch('value', function(newVal, oldVal) {
                document.querySelector("#chart").style.display = "none";
                document.querySelector(".loadingCustomChart").style.display = "block";
                setTimeout(function() {
                    AccController = 0;
                    AccSocket = 0;
                    for(const element in newVal)
                        for(const property in newVal[element])
                            if(new RegExp("Portable Socket").test(property))
                                AccSocket = AccSocket + newVal[element][property];
                            if(new RegExp("Smart Light Controller").test(property))
                                AccController = AccController + newVal[element][property];
                    document.querySelector("#chart").style.display = "block";
                    document.querySelector(".loadingCustomChart").style.display = "none";
                    chart.updateSeries([AccController, AccSocket], true);
                }, 2500);

Also, I could not find a way to scale the widget in the same way as the default one:

(Left → Default, Right → Custom)

Also, I think I need to destroy the graph before leaving this page to avoid the console error:

Either way, I need this to work!
Thanks in advance,


The console error was caused by ApexCharts when the after component was removed from the page and the relevant elements for the SVG were not found.
By adding:

$scope.$on('$destroy', function() { chart.destroy(); });

gets solved.

The issue stems from the aggregation interval. While the timeframe extends over several hours, the aggregation interval is set to a minute. Based on your data, aggregating by the minute provides the observed value, which is accurate.

However, I believe we should introduce an additional aggregation option. Instead of being “configurable”, it could be labeled as “timeframe”, allowing the widget to display the aggregated value for the entire timeframe (for 24 hours in your example). This adjustment makes sense since the donut widget can only represent a single data point.

What are your thoughts? We have aligned the Apex chart colors with the ones configured in the series and believe we can launch this update today as part of the next beta release, along with some other enhancements.

I love the idea! It is the intuitive way to think about it.

love to hear about the colours!

Thank you,



we have the new feature and the fix about the color in the new BETA version. Do you want to update to the latest version?

Best regards.

Hi @alvarolb

Would this update solve this “problem”?

No, this is not related to the apex chart, but the underlying timeseries database.

1 Like

@SRG Would you like to test the new version?

Hi @alvarolb,

Yes, I would like to try it.
But I am concerned about our production scope. As this version is under development I don’t want to bother the user with new problems.

What do you recommend? is it easy to revert to the current server version?

Thank you.

I recommend testing it out, as we can always switch back to the previous version. It is a BETA version but has been tested in many scenarios already. What most clients do to avoid interfering with their production stacks is to have a staging instance with the latest version, and a production one with a fixed version. Once they test all the required features of the latest versions, they migrate production to the recent one.

Okay, I will discuss it with my colleagues and send you a message about it as soon as possible.

Thank you!