Line components render offset from rest of chart when the XAxis component's 'scale' property is assigned to 'linear'

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

Report a bug

What is the current behavior?

When using a scale of linear with time series data (encoded in unix timestamps), Line components within a LineChart render offset to the rest of the chart. (Mine were wrapped in ResponsiveContainer, but I have validated that removing this does not solve my occurrence of this issue.)

Appears in the fiddle posted below. Notice how the orange and green lines run off the chart

This behavior does not effect the Tooltip’s cursor.

jsfiddle Demo of problem (on right-hand side)

What is the expected behavior?

Line’s output should render in the appropriate position. Note: this happens with multiple different scale.

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

macOS High Sierrra, Chrome 62, using the latest npm release at time of writing (1.0.0-beta.6)

[tkeffer]

Setting type='number' in <XAxis> solved my problem:

 <XAxis
     dataKey='timestamp'
     domain={['auto', 'auto']}
     scale='time'
     type='number'
/>

Otherwise, the default type='category' applies, resulting in categories that center on the tick marks, and thus stray beyond the end of the x-axis.

Applying the fix to @B3rry JSFiddle fixes his problem as well: http://jsfiddle.net/zqu3rb8s/4/

I leave it to him to close the issue.

[orhan-swe]

I have also seen this; initial XAxis:

<XAxis
                    dataKey="name"
                    scale="time"
                    interval="preserveStartEnd"
                    tickFormatter={getTickFormat}
                    ticks={ticks}
                />

I had to add both type and domain to get rid of the offset:

<XAxis
                    dataKey="name"
                    scale="time"
                    interval="preserveStartEnd"
                    tickFormatter={getTickFormat}
                    ticks={ticks}
                    domain={['auto', 'auto']}
                    type="number"
                />

It should not be necessary to add both domain and type, I would suggest that this is a bug.