Apexchart stacked bar not working well with time series

[clement-hollander]

Description

When we use datetime series and stacked bar chart, the legend does not behave correctly :

• clicking the first item make whole columns disappear
• clicking the second item make the remaining not stacking

Steps to Reproduce

1. https://codepen.io/clement-hollander/pen/LYdKMMP
2. Click on "Product A" : everything disappear
3. Click on "Product B" : remaining column does not stack

Expected Behavior

Clicking the legend to enable / disable columns should behave correctly as in https://apexcharts.com/javascript-chart-demos/column-charts/stacked/

Actual Behavior

Clicking the legend to enable / disable columns does not behave correctly

Screenshots

Reproduction Link

https://codepen.io/clement-hollander/pen/LYdKMMP

[LucasJappert]

I have the same problem dude. Could you resolve it?

[chuuuan]

I also have the same problem, for the bar chart you can't include the datetime value to your series data, needs to separate the datetime value to the xaxis categories. Also, instead of a nested array([[1327359600000,30.95], [1327446000000,31.34], [1327532400000,31.18]]) for series data, use a single array ([30.95, 31.34, 31.18]).
Just like the demo provided on their site.

So you need to update you chart options to:

var options = {
        series: [{
            name: 'PRODUCT A',
            data: [30.95, 31.34, 31.18]
        }, {
            name: 'PRODUCT B',
            data: [30.95, 31.34, 31.18]
        }, {
            name: 'PRODUCT C',
            data: [30.95, 31.34, 31.18]
        }],
        chart: {
            type: 'bar',
            stacked: true
        },
        xaxis: {
            type: 'datetime',
           categories: [1327359600000,1327446000000,1327532400000],
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

Codepen: https://codepen.io/chuan520/pen/eYjLoBV