bar chart with width '100%' and xaxis.type="datetime" has spacing around the chart

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG

https://apexcharts.com

MIT License

14.03k stars 1.28k forks source link

bar chart with width '100%' and xaxis.type="datetime" has spacing around the chart #4522

Closed zee0786 closed 2 weeks ago

zee0786 commented 3 weeks ago

Description Steps to Reproduce 1- draw a vertical bar chart with type= datetime 2- After giving all the required params the graph just ignores the available width provided.,

Actual behaviour

there is some space before and after the plot

Expected Behavior it should take up the full width if the width provided is '100%'.

Reproduction Link https://codesandbox.io/p/sandbox/react-basic-example-forked-6n82ky?file=%2Fsrc%2FApp.js

brianlagunas commented 3 weeks ago

Your reproduction link does not work. Please update it.

Your react sample works, but you are hardcoding the width to 500, so I am confused on what you are trying to report.

zee0786 commented 3 weeks ago

I have updated the access to reproduction link above and this is what I am getting. The extra white space that needs to be filled up with the plot has been marked in yellow. Also the size of this white space is directly proportional to the columnWidth applied in

plotOptions: { bar: { columnWidth:'80%' }, },

more the value of columnWidth more the graph plot area shrinks.