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

[ScriptShah]

I like to work on this please assign me.

[Atmos4]

@ScriptShah what is the progress on this? Is it going to be fixed or do you need help in some way?

[junedchhipa]

The issue is not reproducible as tested with the latest version 3.54.1. Hence, closing it. Please feel free to provide another example which reproduces the original issue, and I will re-open.

[ScriptShah]

thanks @junedchhipa

[Atmos4]

@junedchhipa I still have the issue with the latest version (actually there are additional bugs now with 3.54.1)

For posterity: I solved it with grid padding.