The number displayed on horizontal graph overflow out of the frame.

[nshpam]

Description

The number displayed on horizontal graph overflow out of the frame

Steps to Reproduce

1. Create a chart with the following code on version 3.49.0

<ReactApexCharts
                        options={
                            {
                                chart: {
                                    type: 'bar',
                                    height: "auto"
                                },
                                plotOptions: {
                                    bar: {
                                        horizontal: true,
                                        dataLabels: {
                                            position: 'top',
                                        },
                                        barHeight: '70%'
                                    }
                                },
                                dataLabels: {
                                    enabled: true,
                                    offsetX: -10,
                                    style: {
                                        fontSize: '14px',
                                        colors: ['#000'],
                                    },
                                    formatter: function (val, opts) {
                                        if(val == 0){
                                            return "";
                                        } else {
                                            return val;
                                        }
                                    },
                                },
                                stroke: {
                                    show: true,
                                    width: 1,
                                    colors: ['#fff']
                                },
                                tooltip: {
                                    shared: true,
                                    intersect: false,
                                    followCursor: true,
                                },
                                states: {
                                    active: {
                                      filter: {
                                        type: 'none' /* none, lighten, darken */
                                      }
                                    }
                                  },
                                  
                                xaxis: {
                                    categories: GraphData2,
                                },
                                yaxis: {
                                    labels: {
                                        formatter: function (value) {
                                            return value;
                                        },
                                        maxWidth: 400,
                                    }
                                }
                            }
                        }
                        series={GraphData}
                        type="bar" height={"auto"}
                        />

Expected Behavior

Actual Behavior

Screenshots

Reproduction Link

https://codesandbox.io/p/sandbox/react-basic-example-forked-yzw9r5?file=%2Fsrc%2FApp.js%3A20%2C23&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw1xtm3m00063j6jl0dp4pay%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw1xtm3m00023j6joupagu0i%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw1xtm3m00033j6jarxpx1un%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw1xtm3m00053j6jxqhv8ss2%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw1xtm3m00023j6joupagu0i%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw1xtm3m00013j6jipjvilye%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clw1xvf0l006c3j6jleu4zy26%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A20%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A20%252C%2522endColumn%2522%253A23%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clw1xtm3m00023j6joupagu0i%2522%252C%2522activeTabId%2522%253A%2522clw1xvf0l006c3j6jleu4zy26%2522%257D%252C%2522clw1xtm3m00053j6jxqhv8ss2%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw1xtm3m00043j6je187xk0t%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clw1xtm3m00053j6jxqhv8ss2%2522%252C%2522activeTabId%2522%253A%2522clw1xtm3m00043j6je187xk0t%2522%257D%252C%2522clw1xtm3m00033j6jarxpx1un%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clw1xtm3m00033j6jarxpx1un%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D