React vis - Formatting time tick on the x axis - react-vis

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.