xaxis last label is trimmed

[Epithumia]

Codepen

Showcase codepen

Explanation

The showcase codepen uses the current versions of Vue-ApexCharts and ApexCharts.js, the expected behavior uses v1.1.0

• What is the behavior you expect?

Correct result codepen

The x axis sets the first and last point to be at the edge of the grid in the current version of Vue-ApexCharts, whereas the version showcased in the demos (that's where I picked the initial code) correctly sets the labels and the datapoints to have enough offset on both sides so that no clipping occurs.

• What is happening instead?

Edge points and labels are clipped.

• What error message are you getting?

None.

Edit: Let me know if I should submit this to the Vue-ApexCharts repo instead.

Edit2: after fiddling with codepen, I can say this is an apexcharts issue, not the Vue component. This codepen uses apexcharts v3.1.0 and displays fine. It breaks starting with 3.2.0.

Edit3: I found that a property was added in 3.2.0 (xaxis.tickPlacement), which defaults to 'on', whereas the old behavior for a line chart was to have it as 'between'. The documentation isn't reflecting this, nor does it mention the existence of xaxis.tickPlacement. May I suggest that:

1. Default for line should be set to 'between'
2. Documentation should be updated ?

[junedchhipa]

Thanks for reporting the issue.
I think, providing some padding on the right side when the last label is long will prevent it being cropped.
I will surely update the docs too.

[junedchhipa]

I reverted xaxis.tickPlacement: between as this seems to be the easiest fix for now.

[jchamb]

@junedchhipa Looks like this is still an issue with datetimes that include month. Saw in the docs that tickPlacement does not affect the datetime. Any tricks to get around it cutting that last label on the right?

https://codesandbox.io/s/o2j3znx0q

[junedchhipa]

Re-opening this if datetime labels still have an issue with the last label.

[joshleblanc]

If you use a custom formatter function, the labels will still break out of the rendering area.

https://codesandbox.io/s/vue-basic-example-2dw9c

[ciornav]

Hello, the issue persists, but in my case on the first value. 'between' option works well for categorical variables but as the doc says not for numerical.
Would be very grateful to fix this.

[travisbotello]

Still seeing the same issue with 3.8.5