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

[ben-izd]

I had the same problem for datalabels, Changing CSS for labels helped me to solve it .apexcharts-data-labels{ display:contents !important; }

[AlexandraPechueva]

when I use "min: new Date('01-01-2019').getTime()" in xaxis to display chart from the start of the year, first column and label cropped.

apexcharts 3.10.1 ng-apexcharts 1.1.1

[dtahir57]

Everyone please do the following. It should work

xaxis: { tickPlacement: 'between', }

This should solve the problem.

I am using "apexcharts": "^3.10.1", "vue-apexcharts": "^1.5.1",

[ricardobr001]

Same problem here, the last date on the bottom corner in the right is cropped =(

My options for xaxis are

{
  xaxis: {
      title: {
        text: xaxisTitle,
        style: {
          fontSize: 20,
          color: '#ffffff'
        }
      },
      labels: {
        formatter: value => {
          return moment(new Date(value)).format('MM-YYYY')
        },
        style: {
          fontSize: 20
        }
      },
      tickAmount: 5,
      tickPlacement: 'between'
  }
}

I'm using the react-apexcharts on version 1.3.5"

[pengiundev]

Still having that issue with datetime on version 1.3.16

[alexandrehsd]

Guys, after studying this issue, it happened to me that when I converted the datetimes to milliseconds, somehow the program interpreted those datetimes in GMT timezone, and then converted it to my timezone (UTC -3). Consequently, I always got the date of the last day which led me to think that the last date was being cropped.

My solution was to simply add up 3 hours (or 3*3.6e6 milliseconds) to my timestamps.

[gabrielnvg]

This did the trick for me:

xaxis: { tickPlacement: 'on', }

[sebastiaanluca]

Still an issue and no fix at the moment. Using a datetime type and moment.utc(item.created_at).valueOf().

[kakarukeys]

This issue should not be closed. I am seeing this bug on fresh installation of latest apex chart 3.20.0 and vue-apexcharts 1.6.0, with datetime type x data on a line chart. I used the workaround

.apexcharts-xaxis-label:nth-last-child(2) {
  transform: translateX(-20px)
}

[sebastiaanluca]

Had to add an entire day to each of my datetime x-axis entries just to get the last month to show up. January still doesn't show.

moment.utc(item.date, 'Y-MM', true).add(1, 'day').valueOf(),

Using a numeric x-axis shows January and December double. Tried to tweak it, but either it shows them double or not at all.

[junedchhipa]

Those who are still facing the issue, please post a Codepen/Codesandbox demo to reproduce. The original Codesandbox has this issue fixes, so please post your own.

[Breta01]

I think I am facing the same issue. Actually one of the demo charts displays this issue (I am using latest Firefox in case it is browser related): https://apexcharts.com/javascript-chart-demos/line-charts/gradient/

If you look on the thicks on x-axis, there is thick missing at the end of the chart (bottom-right) corner. In the SVG there is even <text> tag created for it, but no text is filled. (I guess it doesn't fit one of the fit checks??) In case you scale down your window, so that the labels are rotated, the last label is shown. Would it be possible to fit the last label in the same way the first label is shown?

[alon-loris]

This issue persists. The last date on the x-axis is cut:

Tried @kakarukeys workaround above, and it works sometimes, but unfortunately not always, because sometimes the trimmed label is indeed the 2nd-to-last apexcharts-xaxis-label element as mentioned in the workaround (for some reason there's another empty label after it), but sometimes the trimmed label is really the last apexcharts-xaxis-label element, and in that case the css would apply to the wrong element.

Any plans to fix this? Or any workaround that covers all cases?

https://codepen.io/alon-loris/pen/QWqRYRa

[cbutler90]

Still an issue, see @alon-loris post above. This is happening with every type of label (the last one on the X axis), not just Date/Time format

[ya3ya6]

I Fixed the issue by adding some padding to the right of chart (now it has enough space to be shown):

grid: {
  padding: {
    left: 20,
    right: 40 // Also you may want to increase this (based on the length of your labels)
  },
},

[carbonrider]

Check this fiddle as well

https://jsfiddle.net/carbonrider/2rc863xw/22/

It doesn't display labels on xaxis for last 2 items. Also hovering over the graph and xaxis labels are far away from each other.

[ryanmaffey]

I'm also having this issue. Here's my example: https://codepen.io/ryanmaffey/pen/YzvBvJv?editors=0010

[montanari2019]

apexcharts people just ignored the problem kkkkkk.

"If I don't see a problem, the problem doesn't exist"

• Team apexcharts

Ps: I'm being ironic

[parautenbach]

If you don't have anything constructive to contribute, find another outlet for your frustration. You have no right to demand anything from an open source project.

[Gunjansokal07]

Check this fiddle as well

https://jsfiddle.net/carbonrider/2rc863xw/22/

It doesn't display labels on xaxis for last 2 items. Also hovering over the graph and xaxis labels are far away from each other.

Hi @carbonrider ,

Have you found a solution to make the last label appear on the x-axis?

[maxtrunk]

Change the x rotation to 90 will resolve this issue

[iskendev]

@junedchhipa @brianlagunas hey guys! Would be great to get fix of this issue?! Please give it some attention

[thuyetnv95]

I Fixed the issue by adding some padding to the right of chart (now it has enough space to be shown):

grid: {
  padding: {
    left: 20,
    right: 40 // Also you may want to increase this (based on the length of your labels)
  },
},

Perfect, it's work for me!