How to customize Recharts Scatter circle size

Question

I wanted to customize Recharts Scatter circle size. Is there any docs for all possible custom options?

    <ScatterChart
            width={400}
            height={400}
            margin={{
                top: 20, right: 20, bottom: 20, left: 20,
            }}
        >
            <CartesianGrid />
            <XAxis type="number" dataKey="x" name="stature" unit="cm" />
            <YAxis type="number" dataKey="y" name="weight" unit="kg" />
            <Tooltip cursor={{ strokeDasharray: '3 3' }} />
            **<Scatter name="A school" data={data} fill="#8884d8" />**
        </ScatterChart>

score 1 · Answer 1 · edited Nov 18 '22 at 17:21

Adding a z-axis changes the size of the circle. If you want all of them to be the same size do this similar to the xaxis or yaxis...

<ZAxis range={[30, 31]} />

Changing the range first number will change the size of all the circles.

If you want the circles to be different sizes depending on a piece of data, follow the link provided and below. It is a perfect example of this. https://recharts.org/en-US/examples/ThreeDimScatterChart

score -1 · Answer 2 · answered Aug 28 '21 at 17:50

-1

You can customize the size of the circles by adding a zAxis. Here's an example from the docs. https://recharts.org/en-US/examples/ThreeDimScatterChart

answered Aug 28 '21 at 17:50

Sarah Ann Garcia

11
1

Please add further details to expand on your answer, such as working code or documentation citations. – Community Aug 28 '21 at 18:30
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – LW001 Aug 29 '21 at 18:53

How to customize Recharts Scatter circle size

2 Answers2