CODEWITHSUNDEEP
reactjsdatedatetimerecharts
modernator
modernator

Reputation: 4427

Set min/max date for date in Recharts.js

I'm using Recharts.js to display chart data in my website. However I want to set minimum/maximum value of XAxis which is date type but try with domain didn't worked to me:

<ResponsiveContainer width="100%" height={200}>
  <BarChart
    width={400}
    height={200}
    data={data}
    margin={{
      top: 20,
      left: 5,
      bottom: 5,
      right: 5
    }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="time" tickFormatter={timeStr => moment(timeStr).format(timeFormat)} />
    <YAxis dateKey="count" type="number" allowDecimals={false} tickCount={10} />
    <Tooltip formatter={(value, name) => [value, startCase(name)]} />
    <Bar dataKey="count" fill="#8884d8" />
  </BarChart>
</ResponsiveContainer>

Key part is :

<XAxis dataKey="time" tickFormatter={timeStr => moment(timeStr).format(timeFormat)} />

domain={['2018-01-01', '2019-12-31']}
domain={['2018-01-01 00:00:00', '2019-12-31 00:00:00']}
domain={['2018-01-01T00:00:00.000+09:00', '2019-12-31T23:59:59.999+09:00']}
domain={[new Date('2018-01-01'), new Date('2019-12-31')]}
domain={[new Date('2018-01-01').getTime(), new Date('2019-12-31').getTime()]}
domain={[moment('2018-01-01').format('YYYY-MM-DD'), moment('2019-12-31').format('YYYY-MM-DD')]}

Still first date set to earliest date and last date to latest date. What am I missing here?

Upvotes: 1

Views: 3312

Answers (1)

Bhagawat Dongre
Bhagawat Dongre

Reputation: 99

domain works with number type of 'number' type axis only;

When you provide date with quotes it becomes a category;

You need to convert date in unix epoch i.e seconds from 1 Jan 1970;

Upvotes: 4

Related Questions