Part of the last bar is cut off at the right end of the chart

[Kcngu01]

Description

Steps to Reproduce

1. Create a 100% stacked bar chart
2. Use a dynamic number of series.
3. Use a dynamic number of date
4. Show a maximum of 5 x-axis label

Expected Behavior

1. Every bar should have the same width, including the last bar on the right end of the chart.
2. The x-axis line should be continuous.
3. No bar should be shown when the value is 0.
4. Display the toolbar if " toolbar: { show: true } " found in the options

Actual Behavior

1. Part of the last bar is missing at the right end of the chart, resulting in the last bar having less width.
2. The x-axis line is discontinuous
3. An invisible bar is shown when the value is 0 (as indicated by the tooltip showing the value as 0).
4. Toolbar displayed only if " toolbar: { show: true } " and " xaxis : { tickPlacement: 'on',} " found in the options

Screenshots

Reproduction Link

success: function(data){ var options = {

                        colors :[
                        '#FF0000', // Red
                        '#00FF00', // Green
                        '#0000FF', // Blue
                        '#800080', // Purple
                        '#FFA500', // Orange
                        '#03A9F4', // Cyan
                        '#FF00FF', // Magenta
                        '#00FF00', // Lime
                        '#FFC0CB', // Pink
                        '#008080', // Teal
                        '#A52A2A', // Brown
                        '#000080', // Navy
                        '#808000', // Olive
                        '#800000', // Maroon
                        '#808080', // Gray
                        '#40E0D0', // Turquoise
                        '#FFD700', // Gold
                        '#4B0082', // Indigo
                        '#C0C0C0', // Silver
                        '#FF6347', // Tomato
                        '#7B68EE', // Medium Slate Blue
                        '#228B22', // Forest Green
                        '#FF4500', // Orange Red
                        '#9932CC', // Dark Orchid
                        '#FF8C00', // Dark Orange
                        '#20B2AA', // Light Sea Green
                        '#FF1493', // Deep Pink
                        '#32CD32', // Lime Green
                        '#8A2BE2', // Blue Violet
                        '#FF69B4', // Hot Pink
                    ],

                        series: data.series,
                        chart: {
                            type: 'bar',
                            height: 350,
                            width: '100%',
                            stacked: true,
                            stackType: '100%',
                            zoom: {
                                enabled: true,
                                type:'x',
                            },
                            toolbar: {
                                autoSelected:'pan',
                                show:true,
                                tools: {
                                    zoom: true,
                                    zoomin: true,
                                    zoomout: true,
                                    pan:true,
                                    reset: true
                                },
                            }
                        },

                        plotOptions: {
                            bar: {
                                horizontal: false,
                            },

                        },

                        stroke: {
                            width: 1,
                            colors: ['#fff']
                        },
                        xaxis: {
                            categories: data.categories,
                            tickPlacement:'on',             //impact the visibility of tsoolbar?
                            min: data.categories.length > 4 ? data.categories.length - 4 : 0,
                            max: data.categories.length,

                        },

                        yaxis:{
                            title: {
                                text: 'Number of participants'
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function (val) {
                                    return val  
                                }
                            }

                        },
                        fill: {
                            opacity: 1
                        },
                        legend: {   
                            position: 'bottom',
                            horizontalAlign: 'center',
                            height: 50,
                        },
                    };

                    var chartAge= new ApexCharts(document.querySelector("#ageChart"), options);
                    chartAge.render();
                },

[brianlagunas]

Please add a link to a sample that reproduces the problem, or this issue will be closed.

[Kcngu01]

Please add a link to a sample that reproduces the problem, or this issue will be closed.

Sorry for the inconvenience, here is the link: Reproduction Link The cut off problem arises when there is large dataset on x-axis from what i observed.