CODEWITHSUNDEEP
react-vis
xyz83242
xyz83242

Reputation: 814

React vis - Formatting time tick on the x axis

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?

Upvotes: 5

Views: 6750

Answers (2)

glimmer
glimmer

Reputation: 626

You can also do more complex label formatting to create custom effects. In this case, when it is a weekly chart, the function creates the three-letter day code over the numerical date of the day. When it is a monthly or longer chart, it creates the three-letter month code over the numerical date of the day. It is very powerful.

  const tickFormatFunction = (value: any, chartDays: number) => {
    const date = new Date(value);
    const day = date.toLocaleDateString('en-US', { weekday: 'short' }); // e.g., 'Mon'
    const month = date.toLocaleDateString('en-US', { month: 'short' }); // e.g., 'Jan'
    const dateNum = date.getDate(); // e.g., '14'
    if (chartDays === 7) {
      return (
        <tspan>
          <tspan x="0" dy="0">{day}</tspan>
          <tspan x="0" dy="15">{dateNum}</tspan>
        </tspan>
      );
    } else {
      return (
        <tspan>
          <tspan x="0" dy="0">{month}</tspan>
          <tspan x="0" dy="15">{dateNum}</tspan>
        </tspan>
      );
    }
  };

Upvotes: 0

xyz83242
xyz83242

Reputation: 814

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.

Upvotes: 9

Related Questions