Adding icons in recharts graph

Viewed 30

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
0 Answers
Related