I'm trying to place an SVG icon on each dot on the graph. For now, they only appear on the X and Y but not on the dots of the graph. How can I do it? The data file that the graph displays:
name: "week 1",
score: 10
},
{
name: "week 2",
score: 7
},
{
name: "week 3",
score: 5
},```
Graph.jsx:
``` const customIcon = (props)=>{
const {x,y,payload} = props
return (
<svg x={x} y={y} width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.68 11.69L8 9.93L10.31 11.69L9.43 8.84L11.75 7H8.91L8 4.19L7.09 7H4.25L6.56 8.84L5.68 11.69ZM16 8C16 3.58 12.42 0 8 0C3.58 0 0 3.58 0 8C0 10.03 0.76 11.87 2 13.28V21L8 19L14 21V13.28C15.24 11.87 16 10.03 16 8ZM8 2C11.31 2 14 4.69 14 8C14 11.31 11.31 14 8 14C4.69 14 2 11.31 2 8C2 4.69 4.69 2 8 2Z" fill="#FFC400"/>
</svg>
)
}```
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/nGh4w.png