Scatter Chart linear X-Axis

What is the current behavior?

I am trying to generate a scatter chart with some data which has an x and y values. X ranges from 1-5 and y ranges from 0-25. I just want to plot all data points into a single chart which respects the ranges as axis.

Example

My Current Component looks like this:

  render() {
    const { data } = this.props;
    const mapped = data.map(d => {
      return {
        x: parseInt(d.orig_x),
        y: Math.round(d.orig_y)
      }
    })

    console.log(mapped.slice(1, 10))
    const limitedData = _.sortBy(mapped.slice(1, 10), 'x')

    return (
      <ScatterChart width={500} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
        <XAxis dataKey="x" name='x' domain={[0, 5]} />
        <YAxis dataKey="y" name='y' domain={[0, 25]} />
        <CartesianGrid horizontal={false} vertical={false} />
        <Scatter name='data' data={limitedData} fill='#8884d8' />
        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
      </ScatterChart>
    )
  }

The current code results in a chart which looks like this:

What is the expected behavior?

The expected behaviour would be that all data points with an X value of e.g. 3 would be on the same point on the x-axis. But in the current version, there are multiple 3 on the x-axis. Is there a way to prevent this?

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

Recharts: 1.0.0-alpha.6 Browser: Chrome

[Kobzol]

Try setting allowDuplicatedCategory={false} on the XAxis component.

[xile611]

@KeKs0r Update the type of <XAxis> which has default value ‘category’.