Is it possible to keep different format date tick on each different day ?

[davidbourrel]

Hi !

I wonder if it possible to display a different format date tick on each different day only ?

I have a chart type "line" with multi axis and x axis "Epoch" is dedicated for dates.

When i zoom, ticks are changing and sometime the different date ticks are hide by another.

Do you know if it possible to always keep the different format date tick (like Major Tick Configuration) ?

My axis X configuration :

    x: {
      type: 'time',
      time: {
        tooltipFormat: "yyyy-MM-dd'T'HH:mm:ss.SSSxxx",
      },
      title: {
        display: true,
        text: 'Epoch',
        color: GREY_COLOR,
        font: {
          size: 16,
        },
      },
      grid: {
        color: '#333333',
      },
      ticks: {
        color: GREY_COLOR,
        callback: (incomingDate: number) => {
          const newDateWithoutTZ = new ConvertorDateToDateWithoutTimezone().convert(incomingDate);

          const date = format(newDateWithoutTZ, 'dd-MM-yyyy');
          const time = format(newDateWithoutTZ, 'HH:mm');

          if (isSameDay(currentTickDate, newDateWithoutTZ)) {
            return time;
          } else {
            currentTickDate = newDateWithoutTZ;

            return `${date}-${time}`;
          }
        },
      },
    },

Thanks ! Tell me if you need more information

[Udemology]

You probably need to use major and minor ticks. This video should help: https://youtu.be/fghycmP6Vuw

[davidbourrel]

Like this ? it doesn't work :/ I made a calculation with a range of 10 days

ticks: {
        maxRotation: CHART_MAX_ROTATION,
        minRotation: CHART_MIN_ROTATION,
        color: GREY_COLOR,
        callback: (incomingDate: number, i:number, array: Tick[]) => {
          const tick = array[i]
          const tickValue = tick.value

          const newDateWithoutTZ = new ConvertorDateToDateWithoutTimezone().convert(tickValue);

          const date = format(newDateWithoutTZ, 'dd-MM-yyyy');
          const time = format(newDateWithoutTZ, 'HH:mm');

          if (isSameDay(currentTickDate, newDateWithoutTZ) && !tick.major) {
            return time;
          } else {
            currentTickDate = newDateWithoutTZ;

            return `${date} ${time}`;
          }
        },
      },