X axis values with labels not aligned

[jimfilippou]

Codepen

https://codepen.io/jimfilippou-the-animator/pen/aRpxdG

Explanation

The X-axis takes 100% of the area but line chart doesn't

• What is the behavior you expect?
  Equally aligned values on X axis

• What is happening instead?
  This https://codepen.io/jimfilippou-the-animator/pen/aRpxdG

• What error message are you getting?
  No error message

[junedchhipa]

Try this:

grid: {
    padding: {
       left: 0,
      right: 0
    }
}

[jimfilippou]

I have updated my pen https://codepen.io/jimfilippou-the-animator/pen/aRpxdG
The issue seems to be resolved only for first and last values, however, the initial issue persists

[junedchhipa]

If you do not provide any labels or categories, ApexCharts generates labels in 1.2.3... fashion and gives xaxis.tickAmount: 8 as default.
In such a case, you will have to play with tickAmount and see what works. I guess tickAmount: 7 will work in your case.

I will change tickAmount default to equal the number of data-points for such use-cases in the next releases.

[jimfilippou]

Fixed, but close the issue whenever you default the tickAmount to the data points.
Thanks once again! 🙌 🎉