Is is possible to prevent labels overlapping when using FixedScaleAxis together with ticks option?

[wujekbogdan]

I use FixedScaleAxis together with divisor (I've written some code that determines the optimal divisor value based on labels length and chart container width). This works very well when the number of data points is greater than the number of labels.

But this solution gives confusing results when the number of data points is lower than the number of labels. In such case, I would rather like the labels count to be the same as the number of data points and also I'd like them to be rendered directly under data points. So in such a scenario, I don't use divisor and instead I define ticks explicitly:

const getXAxisOptions = () => {
  const dataSeriesPointsCount = this.series.reduce((currentMax, { data }) => {
    return Math.max(currentMax, data.length);
  }, 0);

  const baseOptions = {
    type: Chartist.FixedScaleAxis,
    high: this.axesBounds.axisX.high,
    low: this.axesBounds.axisX.low,
    labelInterpolationFnc,
  };

  if (dataSeriesPointsCount < this.xAxisDivisor) {
    const ticks = this.series.reduce(
      (acc, { data }) => [...acc, ...data.map(({ x }) => x)],
      []
    );

    return {
      ...baseOptions,
      ticks,
    };
  }

  return {
    ...baseOptions,
    divisor: this.xAxisDivisor,
  };
};

At first glance it works perfectly:

But unfortunately, in some edge cases, when data points are very close to each other then labels are rendered one over another:

Is there any way to prevent labels from overlapping? Or do I need to implement my own logic that will exclude overlapping labels from ticks array?

[Arantiryo]

Hello @wujekbogdan 👋

Chartist has recently been updated to version 1.0 with some new exciting changes like ESM and TypeScript support. The migration guide can be found right here.

Please let me know if the issue is still relevant to you so we can further investigate it!