如何在ReactJS中用X轴和Y轴在人体图像上绘制指针

我需要帮助在人体图像上绘制数据指针。 例如：如果我有一个数据集，其中只有X轴上的1到5的值。在Y轴上--什么都没有。

人体图像从上到下有8个垂直的圆圈，根据我得到的数据，每个圆圈在X轴上会在1到5之间移动。

    ['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.