React vis - Formatting time tick on the x axis

Question

I have added the xType="time" to the chart to show the time scale on the x-axis. I am displaying data only for 25 seconds range. Currently, the x-axis is showing the time format as :SS.

So the x-axis shows time in the following format (data showing each second):

:23, :24, :25

What I am getting from the database is time string in the following format: 2019-07-01T10:42:38.621Z

I have tried the following:

new Date(item.date) // shows ':023'
new Date(item.date).getTime() // shows ':023'
new Date(item.date.substring(19, 0)).getTime() // shows ':023'

    oscilloscope.oscilloscope.map((item, index) => {
        return {
            x: new Date(item.date.substring(19, 0)).getTime(),
            y: item.data.fuelInjection
        }
    })

Always getting the same result.

I would like the x-axis to be formatted in HH:MM:SS format.

So the x-axis showing data like: 11:42:05, 11:42:06, 11:42:07

I am showing a range of 25 seconds apart. This seems to be set by the chart automatically as if I change the range to the extent that a couple of minutes are included the time display on x-axis changes to MM:SS format. I still need the HH:MM:SS format thou. Can this be done at all?

Answer 1

To answer my own question week later, I found an answer in different question about react-vis here on the Stack Overflow: show date in( MM-DD) format in x-axis using react-vis

In my case the solution was:

<XAxis 
  tickFormat={function tickFormat(d){
    const date = new Date(d)
    return date.toISOString().substr(11, 8)
   }}
/>

That did the job. Hope it will save someone else time.