custom colors for ScatterPlot

[lucksp]

I am trying to use the original example of Scatter plot, and I have some code so that I render a specific color of the scatter indicator based on data values - if above X color is red, otherwise green.

However, I am having issues with getting the colors to work:

here is example DataPoint being sent to the chartData:

 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1731954696996, "y": 0}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1731954689111, "y": 0}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1731954681908, "y": 0}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1731954576066, "y": 0}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1731954323897, "y": 0}
 LOG  {"color": "#FFD700", "goalLine": 500, "posture": "standing", "style": {"color": "#FFD700"}, "type": "calmPoints", "x": 1730228181959, "y": 620.8000000000042}
 LOG  {"color": "#FFD700", "goalLine": 500, "posture": "seated", "style": {"color": "#FFD700"}, "type": "calmPoints", "x": 1730227966403, "y": 624.2000000000049}
 LOG  {"color": "#FFD700", "goalLine": 500, "posture": "standing", "style": {"color": "#FFD700"}, "type": "calmPoints", "x": 1729712680106, "y": 543.9999999999867}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1729712466684, "y": 344.599999999989}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "standing", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1729711901807, "y": 6.200000000000003}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "seated", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1729711897679, "y": 138.80000000000067}
 LOG  {"color": "#FF4444", "goalLine": 500, "posture": "standing", "style": {"color": "#FF4444"}, "type": "calmPoints", "x": 1729520553302, "y": 128.20000000000127}
 LOG  {"color": "#FFD700", "goalLine": 500, "posture": "seated", "style": {"color": "#FFD700"}, "type": "calmPoints", "x": 1729520504319, "y": 627.4000000000057}

so I should be able to use style.color as I prepare the chartData for use by CartesianChart

interface ChartDataPoint {
  x: number;
  seated?: number;
  standing?: number;
  seatedColor?: string;
  standingColor?: string;
  posture: POSTURE_PART;
}


const MetricChart = ({ data, font }: { data: DataPoint[]; font: any }) => {
  // Group data by timestamp and separate seated/standing values
  const chartData = data.reduce<ChartDataPoint[]>((acc, point) => {
    const existingPoint = acc.find((p) => p.x === point.x);
    if (existingPoint) {
      if (point.posture === POSTURE_PART.SEATED) {
        existingPoint.seated = point.y;
        existingPoint.seatedColor = point.style.color; // add data color to chart point 
      } else {
        existingPoint.standing = point.y;
        existingPoint.standingColor = point.style.color; // add data color to chart point 
      }
    } else {
      const newPoint: ChartDataPoint = {
        x: point.x,
        posture: point.posture,
        goalLine: point.goalLine,
      };
      if (point.posture === POSTURE_PART.SEATED) {
        newPoint.seated = point.y;
        newPoint.seatedColor = point.style.color; // add data color to chart point 
      } else {
        newPoint.standing = point.y;
        newPoint.standingColor = point.style.color; // add data color to chart point 
      }
      acc.push(newPoint);
    }
    return acc;
  }, []);

  return (
    <CartesianChart
      data={chartData}
      xKey="x"
      yKeys={['seated', 'standing', 'goalLine']} // adding seatedColor & standingColor is resulting in TS error
    >
      {({ points, xScale, yScale }) => {
        return (
          <>
            <Line
              points={points.seated}
              color={brand.disabled}
              strokeWidth={1.5}
              curveType="step"
              animate={{ type: 'timing', duration: 300 }}
            />
            <Line
              points={points.standing}
              color={brand.trademark}
              strokeWidth={1.5}
              curveType="step"
              animate={{ type: 'timing', duration: 300 }}
            />
            <Scatter points={points.seated} color={points.seatedColor} shape="circle" /> // color results in "black" which isn't one of the colors
            <Scatter points={points.standing} color={points.standingColor} shape="square" />
          </>
        );
      }}
    </CartesianChart>
  );
};

the acc from above looks like:

As you can see the data looks good - if standing there is standingColor, and if seated, there is seatedColor:

{"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731955151997}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731955013759}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954966457}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954747870}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954696996}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954689111}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954681908}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954576066}, {"goalLine": 500, "posture": "seated", "seated": 0, "seatedColor": "#FF4444", "x": 1731954323897}, {"goalLine": 500, "posture": "standing", "standing": 620.8000000000042, "standingColor": "#FFD700", "x": 1730228181959}, {"goalLine": 500, "posture": "seated", "seated": 624.2000000000049, "seatedColor": "#FFD700", "x": 1730227966403}, {"goalLine": 500, "posture": "standing", "standing": 543.9999999999867, "standingColor": "#FFD700", "x": 1729712680106}, {"goalLine": 500, "posture": "seated", "seated": 344.599999999989, "seatedColor": "#FF4444", "x": 1729712466684}, {"goalLine": 500, "posture": "standing", "standing": 6.200000000000003, "standingColor": "#FF4444", "x": 1729711901807}, {"goalLine": 500, "posture": "seated", "seated": 138.80000000000067, "seatedColor": "#FF4444", "x": 1729711897679}, {"goalLine": 500, "posture": "standing", "standing": 128.20000000000127, "standingColor": "#FF4444", "x": 1729520553302}

how come I can render points.seated ,but not points.seatedColor?

I figured I could try to map the current point index to the original chartData and get the color, but there's no index or callback from color prop.

Any ideas?

[ahuckeba]

I'm also wondering why this seems to be so challenging. I'm converting a series of charts built in the old victory API to victory-xl and unless I'm missing something the only way I can see to have the points colored differently based on their y value is to render a separate scatter component for each color group.

Is there a technical reason why CartersianChart couldn't include a prop to pass additional serializable properties from the data array down to children, and not just x and y values? I have a color property on the objects in my data array, and being able to simply use points.color for the Scatter component's color prop would be much simpler.