Image as custom shape for scatter dots

[jeadys]

How can I use an image instead of a colorful dot as a scatter point?

I tried something like below but this doesn't work.

  const CustomScatterShape = () => {
    return (
      <Image src="/images/scatter.webp" alt="scatter" width="0" height="0" sizes="100vw" className="h-10 w-10 rounded-md object-cover" />
    )
  }
  
  <Scatter data={trackAudioFeatures} fill="#93c5fd" shape={<CustomScatterShape />} />

[jeadys]

An example here of images used in a graph

[ckifer]

Hi, what component are you using for Image?

[jeadys]

I'm using Next Image component. I also tried using standard HTML img tag.

[ckifer]

SVGs require the <image> tag rather than img. Can you try that?

[jeadys]

This works indeed, thanks for the help. Here is the result

// cx and cy for correct coordinates
const CustomScatterShape = ({ cx, cy }: DotProps) => {
  return (
    <svg width="50" height="50" x={cx} y={cy}>
      <image href="/images/dummy.webp" width="50" height="50" />
    </svg>
  )
}

// Passing CustomScatterShape in shape property
<Scatter data={trackAudioFeatures} shape={<CustomScatterShape />} />

[ckifer]

Nice, glad to hear it!