CODEWITHSUNDEEP
reactjschartsscatterrecharts
Adam Sith
Adam Sith

Reputation: 63

Recharts ScatterChart not rendering dots and duplicating values in XAxis

I'm trying to render a ScatterChart with ReCharts.

The y axis is rendering appropriately, as are the labels for the different scatter lines, however no dots appear and the x axis includes duplicate values. 

 let line2, yAxis = null;
 let y_axis1 = y_axis;
 const scatters = [];

 if (predictionType === 'range') {
     y_axis1 = "lower_bound";
     line2 = <Line type="monotone" dataKey="upper_bound" stroke="#82ca9d" />
     Object.keys(data).map((email, i) => {
     const datum = data[email];
     const lowerBoundName = `${email} lower bound`
     const upperBoundName = `${email} upper bound`
     scatters.push(<Scatter 
         data={datum} 
         dataKey='lower_bound'
         key={-i}
         fill="#8884d8"
         name={lowerBoundName}
         shape='square' />)
     scatters.push(<Scatter 
         data={datum} 
         dataKey='upper_bound'
         key={i}
         fill="#8884d8"
         name={upperBoundName}
         shape='diamond' />)
     })
 } else {
     Object.keys(data).map((email, i) => {
     const datum = data[email];
     console.log(datum)
     scatters.push(<Scatter 
         dataKey='value'
         data={datum} 
         key={i}
         fill="#8884d8"
         name={email} />)
     })
 }

 // Customize
 const LineColor = y_axis == 'average' ? '#81d4fa' : '#81d4fa';

 if (predictionType === 'boolean') {
     yAxis = <YAxis 
          allowDecimals={false}
          ticks={[0,1]}
          tickFormatter={(tickItem) => tickItem === 1 ? 'true' : 'false'}
          />
 } else {
     yAxis = <YAxis name='value'/>
 }

 return (
     <ScatterChart width={730} height={250}
         margin={{ top: 20, right: 20, bottom: 10, left: 10 }}>
     <CartesianGrid strokeDasharray="3 3" />
     <XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate}/>
     {yAxis}
     <Tooltip cursor={{ strokeDasharray: '3 3' }} />
     <Legend />
     {scatters}
     </ScatterChart>   
 )

The prediction_type specifies whether the data includes lower bound and upper bound values. It's not that important for my issue. The issue will occur whatever value prediction_type has. Here's an example of sample datum:

datum = [{created_at: "2017-12-29T02:28:31.290Z", confidence: 0.5, lower_bound: 1, upper_bound: 10}
    
{created_at: "2017-12-29T02:28:43.283Z", confidence: 0.6, lower_bound: 5, upper_bound: 7}
    
{created_at: "2017-12-29T02:28:57.074Z", confidence: 0.7, lower_bound: 8, upper_bound: 13}
    
{created_at: "2017-12-29T02:32:27.891Z", confidence: 0.6, lower_bound: 8, upper_bound: 20}
    
{created_at: "2017-12-29T02:34:08.463Z", confidence: 0.95, lower_bound: 6, upper_bound: 10}]

And an example of sample data: { [email protected]: datum }

There are no dots and the x axis values are duplicated.

enter image description here

Upvotes: 3

Views: 4402

Answers (2)

Lucas Ota&#241;o
Lucas Ota&#241;o

Reputation: 11

Well... I'm almost 5 years late here, but I'm adding some explanation of the answer from @colorswall:

In this case you're missing the type on the X-axis, this value only receives 'number' or 'category'. In this case you're using a date field (string) which count as a 'category', so you'll need to add the allowDuplicatedCategory={false} prop to avoid the duplicated values on that axis.

Upvotes: 1

colorswall
colorswall

Reputation: 188

You can try to increase gap between labels for axis with dates

<XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate} minTickGap={30} type="category" allowDuplicatedCategory={false} />

Recharts API XAxis (minTickGap)

Upvotes: 1

Related Questions