How to hide scatter when the value is 0 in rechart

Viewed 781

I'm using rechart , in that I've one problem. I'm using scatter chart. If the value of scatter chart is 0 scatter is displaying on top of x-axis(Y value 0), I don't want to display scatter when value is "0"

How can I do that , Some one please help.

Code:

  const {ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data01 = [{x: 100, y: 200}, {x: 120, y: 0},
                ];


const ThreeDimScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
     
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend />
        <Scatter name='A school' data={data01} fill='#8884d8' shape="star"/>

      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <ThreeDimScatterChart />,
  document.getElementById('container')
);

Output:

enter image description here

So in this image for 2nd scatter x value is 120 and y value is 0, So if y value is 0 . I don't want to diaplay scatter at all.

Please help me in this

Thanks

0 Answers
Related