CODEWITHSUNDEEP
javascriptreactjsrecharts
Ethranes
Ethranes

Reputation: 349

Recharts tickFormatter not formatting date

I have a date structure like this

enter image description here

a tick formatter like this

  const formatXAxis = tickFormat => {
    return moment(tickFormat).format('DD/MM/YY');

}

and my chart looks like this

          <LineChart
        width={600}
        height={300}
        data={data.list}
        margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
      >
        <Line 
          type="monotone" 
          dataKey="components.co" 
          stroke="#8884d8" />
        <XAxis
          dataKey="dt"
          tickFormatter={formatXAxis}
          domain={['dataMin', 'dataMax']}
          type="number"
        />
        <YAxis />
        <Tooltip />
      </LineChart>

But when the chart is rendered it reads in the dt as the timestamp, but the converter isn't converting the timestamp, it is just setting the epoch start date in each case

enter image description here

I've looked at other examples of people doing the same thing but I can't see where I'm going wrong here. Any help is appreciated. Let me know if I've missed any info that might be relevent. Thanks!

Upvotes: 3

Views: 6905

Answers (1)

pablogarcor
pablogarcor

Reputation: 381

You have a couple of problems with your code. The first one is with the type property you are passing to component. The type isnt a number because you are formatting it to be a string, you should leave it unset or with the value category

<XAxis dataKey="dt" tickFormatter={(tick) => formatXAxis(tick)} type={'category'} />

The second one is with the way you are parsing the unix time with moment. You need first to tell moment that you are passing an unix format value on your function like this:

const formatXAxis = (tickFormat) => {
  return moment.unix(tickFormat).format("DD/MM/YYYY");
};

Anyway I dont really like moment.js, is a bit confusing and docs arent so clear also. I recommend you using date fns, for example, and handling dates will be a way easier.

I leave you a codesandbox with the full code.

Edit tender-pine-iiqsp

Upvotes: 5

Related Questions