Plot pointers on human Image with x-axis and y-axis in ReactJS

Question

I need help in plotting the data pointers on a human image. For example: if I have a dataset which has only X-Axis values ranging from 1 to 5. on Y-Axis - nothing.

Human Image has 8 circles vertically from top to bottom, based on the data I get, each circle will move between 1 to 5 on X-Axis.

    ['Chakra Name', 'X-Position'],
    ['Chakra1', '4'],
    ['Chakra2', '2.6'],
    ['Chakra3', '4.4'],
     .
     .
     .
    ['Chakra8', '2.5'],
  ];

<canvas id="human" width="390" height="390"></canvas> ```


Please help me in getting the human image which has x-axis and y-axis with the data similar to above mentioned.