Recharts X-Axis auto not showing most values in ticks for times?

问题

I've just converted my project from using react vis over to recharts. I'm currently looking into why the ticks aren't showing as expected. There are 96 datapoints that should be showing up and the cartesian grid shows them, but no tick labels appear other than the few at weird times not aligned to the datapoints I provide. (The tick marks should be at a 30 minute interval.)

Is there a way to have the ticks show up just where I specify them in the data?

This is what I currently have (I thought "interval" was supposed to make all the ticks appear). I have the time specified as milliseconds and then format them, which seems to work for the most part.

<LineChart data={datapoints}>
    <XAxis dataKey="x"
           domain = {['auto', 'auto']}
           name = 'Time'
           tickFormatter = {(unixTime) => moment(unixTime).format('HH:mm')}
           interval={0}
           type = 'number'/>
    <YAxis />
    <CartesianGrid/>
    <Tooltip/>
    <Legend/>
    {this.props.yLines.map(lineKey => {
        return <Line dot={false} type="monotone" dataKey={lineKey} isAnimationActive={false}/>
    })}
</LineChart>

And this is what is showing up:

Vs what I would expect (all intervals showing)

Update: I have since added tickCount={96} (like I had with react-vis) but the times are still at weird increments. Like 6:33, 8:20, etc. instead of 30 minute increments.

Any help would be appreciated!

回答1:

Use scale="time" in your XAxis.

来源：https://stackoverflow.com/questions/60401744/recharts-x-axis-auto-not-showing-most-values-in-ticks-for-times