xaxis tickAmount auto adjustment

[andresumanzor]

Hi there!

Is there any way to make the xaxis' tickAmount adjust itself to the series data length (minus 1 for the ticks to be aligned with the labels) in case there is only one serie or two series with the same length present on the Spline Area Charts options object?

I did try leaving it on undefined but, it didn't worked as the ticks remained on different coordinates in relation to the x-axis while making the xaxis.type = "categories" and sending the chart two series with the same length (without them having to necessarily be "datetime" objects).

I did find a workaround by calculating the xaxis.tickAmount as array.length - 1 and leaving the padding on 0 for the chart to begin and end it's path on the elements xaxis limits but, I would like to know if there is a cleaner way to do this rather than calculating the ticks with a formula.

Thank you!

[junedchhipa]

Is your xaxis type category or numeric or datetime?
In the numeric/category, it will be equal to the data-points length, but in datetime, it will be calculated automatically.

If you can post what you've tried (in a codepen) and what result you're looking for, I can provide more insights.

[andresumanzor]

Hi there @junedchhipa,

Here it is: https://codepen.io/andresumanzor/pen/ePGgao

As you can see, the tickAmount is currently set on 17 which makes the graph look as expected so, is there any way I can set the graph to get that value automatically?

As for example for it to take the first series' object in order to be able to get the object data's length and set that as the chart's tickAmount? Just as series[0].data.length - 1

Or as well, for the chart to take the higher data length value on its series in order to set that as its tickAmount value?

Thank you!

[junedchhipa]

Ok, got your point.

I have added an option in xaxis.tickAmount: 'dataPoints' which will set the tickAmount to the number of datapoints in the series.

You will have to config your xaxis like this

xaxis: {
  type: 'datetime',
  tickAmount: 'dataPoints',
  labels: {
    hideOverlappingLabels: false
  }
}

The additional hideOverlappingLabels: false will prevent hiding some labels if they overlap (as hideOverlappingLabels is true by default)

This will be released in v2.1.5 in core apexcharts library.

[andresumanzor]

This is great, thank you so much @junedchhipa!

Just to verify, this will work as well for the react npm version right?

[junedchhipa]

The update will be for core apexcharts library.
apexcharts is a peer dependency for react-apexcharts. This means you will have to manually update apexcharts to the latest version if you want to update. The react-apexcharts will only be updated if there is an update required there.

So, in your react-project, you will have to run npm install --save apexcharts@2.1.5. You don't need to worry about react-apexcharts if react-apexcharts didn't get updated.

[andresumanzor]

Got it, thank you! @junedchhipa