0
239
Viewsrecharts scatterplot, set colour for specific value?
I'm trying to set a specific colour for a value going into a scatter plot in recharts.
The way I'm trying to do this is as below,
<Scatter name="A school" data={data} fill="#8884d8">
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colorType} />
))}
</Scatter>
The dataset going into this looks like this,
const data = [{x:10,y:50,colourType:"#FFBB28"},..]
Currently it is taking one of these colourTypes and applying it to every value. Any ideas on how to make it so it applies only specifically to the single point?
Thanks.
##Update
Unfortunately when I apply the log below, the colours are still always coming out the same.
This is the component in total.
<ScatterChart
width={500}
height={400}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<CartesianGrid />
<XAxis
type="number"
domain={[0, 60]}
dataKey="x"
name="Speed"
unit=" Seconds"
reversed
/>
<YAxis
type="number"
domain={[0, 100]}
dataKey="y"
name="Accuracy"
unit="%"
/>
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Scatter name="A school" data={data}>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
))}
</Scatter>
...(removed reference lines)
</ScatterChart>
thanks and love to understand where I'm going wrong here
1 answers
Answer question0
I don't know where your colorType variable comes from, but I think you can just do this:
<Scatter data={data} name="A school">
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.colourType} />
))}
</Scatter>
If colourType is not a property on every entry, then try this:
<Scatter data={data} name="A school">
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
))}
</Scatter>
Full working code on fresh react app
note: this doesn't include any further changes. I just wanted to demonstrate the dataset more explicitly.
import {
ScatterChart,
CartesianGrid,
XAxis,
YAxis,
Tooltip,
Scatter,
Cell,
} from "recharts";
const data = [
{ x: 10, y: 50, colourType: "#FFBB28" },
{ x: 20, y: 50 },
{ x: 30, y: 40 },
];
function App() {
return (
<ScatterChart
width={500}
height={400}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<CartesianGrid />
<XAxis
type="number"
domain={[0, 60]}
dataKey="x"
name="Speed"
unit=" Seconds"
reversed
/>
<YAxis
type="number"
domain={[0, 100]}
dataKey="y"
name="Accuracy"
unit="%"
/>
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Scatter name="A school" data={data}>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} />
))}
</Scatter>
</ScatterChart>
);
}
export default App;
Output:
