Set domain for date type

Do you want to request a feature or report a bug?

Not sure it’s bug or not, but every try was failed.

What is the current behavior?

I want to set minimum/maximum value for XAxis which is date type.

<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 /> :

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

Let’s say I want to set minimum date to 2018-01-01 00:00:00 and max date to 2019-12-31 23:59:59. All of these won’t worked to me:

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')]}

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Recharts@1.6.2, Chrome 75, MacOS 10.13.6. Didn’t tried with previous version.

[jweinstein92]

For anyone looking for a workaround, I was able to convert my date strings into a timestamp using moment and use those as a type="number" for my XAxis

For example if my data was

[{ date: 'May 10 2020', count: 70}, { date: 'May 11 2020', count: 20}, { date: 'May 12 2020', count: 50}]

I changed it so it was

[{ date: moment.utc('May 10 2020').valueOf(), count: 70}, { date: moment.utc('May 11 2020').valueOf(), count: 20}, { date: moment.utc('May 12 2020').valueOf(), count: 50}]

and my XAxis was

<XAxis
          label={false}
          type="number"
          dataKey="date"
          domain={[left, right]}
          tickFormatter={v => moment.utc(v).format(format())} />

Where left and right are the timestamp ranges. Keep in mind though that without a domain, it is identifying the dataMin as 0, so timestamps like 1589299080 will show very far on the right. I basically took the first and last timestamps of my data and. used those for the domain range.

[T1bbY]

Have just faced same issue. Chart size is rendered correctly according to the domain but time axis renders ticks only within the range from data set ignoring domain setting. https://codesandbox.io/s/gifted-resonance-9opey?file=/src/App.js ReCharts 2.1.6, React 17.0.2

Did you try allowDataOverflow That should help.