Apexcharts.js: Overlapping x-axis labels.

[hardikzignuts]

I am plotting column, line and area chart in single one. but I am facing issue in x-axis labels like this.

I have try to make label customise as it shown in below image. but this customise way introduce new issue. For skipping some dates I have set value of date as ('') to increase label readability.

For plotted label it's indicating properly.

So, I am looking for such configuration in chart which help to make x-axis label readable like this.
Below image is just for reference.

Please help for proper solution as soon as possible.
Thanks in advance.

[junedchhipa]

From the image, it looks like you are plotting dates with xaxis.type: 'category'.
Currently, xaxis.tickAmount property doesn't work for category x-axis.
I will soon make the adjustment to make tickAmount work in categories too.

[srcn]

As a workaround, I use xaxis.labels.formatter to show/hide certain labels. It might not always work depending on the complexity of the data, but it can still give you control on which labels to show and which ones to hide:

formatter: (value) => {
    return (value && value.split(':')[1][1] === '0' ? value : '');
}

In the above example I filter through labels (in my case I use HH:mm) and only return the values for the ones that have 0 at the end, so it will only show values like 12:10, 12:20, 12:30 etc.

I also set the below configuration on xaxis.labels to prevent labels from clipping or not showing at all:

trim: false,
rotate: 0,
minHeight: 40,
hideOverlappingLabels: true,

I know it's hacky but even if the tickAmount works with category types, I still prefer this as I have more control on which labels to show and which ones to hide as opposed to leaving it to the chart and having random values as labels.

[hardikzignuts]

I have changed settings to xaxis: { type: "datetime" }, and it's working.
And Thanks @junedchhipa and @srcn for the replies.

[letzzBuild]

As a workaround, I use xaxis.labels.formatter to show/hide certain labels. It might not always work depending on the complexity of the data, but it can still give you control on which labels to show and which ones to hide:

formatter: (value) => {
    return (value && value.split(':')[1][1] === '0' ? value : '');
}

In the above example I filter through labels (in my case I use HH:mm) and only return the values for the ones that have 0 at the end, so it will only show values like 12:10, 12:20, 12:30 etc.

I also set the below configuration on xaxis.labels to prevent labels from clipping or not showing at all:

trim: false,
rotate: 0,
minHeight: 40,
hideOverlappingLabels: true,

I know it's hacky but even if the tickAmount works with category types, I still prefer this as I have more control on which labels to show and which ones to hide as opposed to leaving it to the chart and having random values as labels.

but there is 1 problem in ur solution , when u hover over the skipped data , xasis time is not shown for labels which it has not plotted .

[letzzBuild]

From the image, it looks like you are plotting dates with xaxis.type: 'category'.
Currently, xaxis.tickAmount property doesn't work for category x-axis.
I will soon make the adjustment to make tickAmount work in categories too.

have you added tickAmount for xaxis.type = category , as of now it is still not working .

[yairEO]

I think best approach is using CSS so that the labels count is changed according to the space they have.
Using media queries, this is what I did:

.apexcharts-xaxis-texts-g{
  > *:nth-child(odd){
    display: none;
  }
}

This is why I always only work with SVG-based graphic libraries and not ones based on canvas, as SVG allows CSS. Canvas completely not flexible and difficult to work with.

[dgknca]

I think best approach is using CSS so that the labels count is changed according to the space they have.
Using _media queries_, this is what I did:

.apexcharts-xaxis-texts-g{
  > *:nth-child(odd){
    display: none;
  }
}

This is why I always only work with SVG-based graphic libraries and not ones based on _canvas_, as SVG allows CSS. Canvas completely not flexible and difficult to work with.

This would be a really great solution if empty texts were not rendered.

I'm removing empty texts to solve this issue.

chart: {
   events: {
      updated: (chartContext, config) => {
         this.$refs.chart.$el.querySelectorAll('.apexcharts-xaxis-texts-g .apexcharts-xaxis-label').forEach(p => {
            if(p.querySelector('tspan').textContent.length === 0) p.remove()
         })
      }
   }
 }