v4 version ticks collback return timestamp, v3 returned time in string

[Aaqu]

I am using time on x axis, can get label value instead of timestamp.
I need to split time "label" into two lines. My solution is good?

v3 example: https://codesandbox.io/s/upbeat-rui-2pehqp?file=/index.html

// v3
time: {
  displayFormats: {
    second: "yyyy-MM-dd H:mm:ss",
    minute: "yyyy-MM-dd H:mm",
    hour: "yyyy-MM-dd H:mm",
    day: "yyyy-MM-dd H:mm",
    week: "yyyy-MM-dd H:mm",
    month: "yyyy-MM-dd H:mm",
    quarter: "yyyy-MM-dd H:mm",
    year: "yyyy-MM-dd H:mm"
  }
},
ticks: {
  ...
  callback: (label) => {
    console.log(label) // "2023-01-15 21:00"
    return /\s/.test(label) ? label.split(" ") : label;	
  }
}

v4 example: https://codesandbox.io/s/dreamy-haslett-eimqm0?file=/index.html

// v4 - works, but...
time: {
  displayFormats: {
    second: "yyyy-MM-dd H:mm:ss",
    minute: "yyyy-MM-dd H:mm",
    hour: "yyyy-MM-dd H:mm",
    day: "yyyy-MM-dd H:mm",
    week: "yyyy-MM-dd H:mm",
    month: "yyyy-MM-dd H:mm",
    quarter: "yyyy-MM-dd H:mm",
    year: "yyyy-MM-dd H:mm"
  }
},
ticks: {
  ...
  callback: (tickValue) => {
    console.log(tickValue) // 1673812800000
    return luxon.DateTime.fromMillis(tickValue).toFormat('yyyy-MM-dd H:mm:ss').split(' ')
  }
}

[stockiNail]

@Aaqu the solution is working even if you are forced to "re-apply" the configuration you have on the time config node.

To avoid that, you could try:

  callback(value) {
    return this.getLabelForValue(value).split(' '); // <--- this is the scale instance.
  }

In this way you could also change your time adapter (maybe using moment or date-fns) and it works without changing the code.

[Aaqu]

this.getLabelForValue(value) does not reference displayFormats instead of returning 2023-01-15 21:00 return Jan 15, 2023, 9:00:00 AM and splits in several places

thanks for answer i search 'this' maybe i will find something

[stockiNail]

uhm... I have not checked the doc and you are right, it uses always datetime, ignoring the configuration. I think this would deserve to be updated by a PR in order to return the label, using the time options.
Ok as workaround:

          callback(value) {
            return this._adapter.format(value, "HH:MM"); // <-- your format to pass
          }

[Aaqu]

thanks, it works

[stockiNail]

@Aaqu FYI #11063

[Aaqu]

Hi, @stockiNail
you know how to properly type _adapter in react charts and timeline

codesandbox example