recharts scatterplot, set colour for specific value?

Question

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

Answer 1

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: