我如何在反应条形图上标记平均值

如何解决我如何在反应条形图上标记平均值

我正在尝试在反应图表上显示平均值。但我不知道如何在 react js 中使用这个包 react-chartjs-2 这是 URL https://www.npmjs.com/package/react-chartjs-2

我想创造这样的东西。用黑色圈起来的那个。到目前为止，我只能创建条形图。

这是我的代码：

const options = {
    plugins: {
      datalabels: {
        color: "#000000",anchor: "end",},scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,maxRotation: 45,minRotation: 0,],yAxes: [
        {
          ticks: {
            autoSkip: false,beginAtZero: true,maintainAspectRatio: false,};

  const graphData1 = {
    labels: dataSet1.label,datasets: [
      {
        label: data1Label,backgroundColor: "rgba(72,196,117)",borderColor: "rgba(72,117,0.6)",borderWidth: 1,hoverBackgroundColor: "rgba(72,0.4)",hoverBorderColor: "rgba(72,1)",data: dataSet1.data,};
  const graphData2 = {
    labels: dataSet2.label,datasets: [
      {
        label: data2Label,data: dataSet2.data,};

return (
    <div className={classes.graphOneRoot}>
      <Grid container>
        <Grid item md={6} sm={12} xs={12}>
          <Grid container>
            {data1 ? (
              <Grid item className={classes.gridItem} md={detail ? 6 : 12}>
                <Bar
                  data={graphData1}
                  width={80}
                  height={400}
                  options={options}
                />
              </Grid>
            ) : null}
          </Grid>
        </Grid>
        <Grid item md={6} sm={12} xs={12}>
          <Grid container>
            {data2 ? (
              <Grid className={classes.gridItem} item md={detail ? 6 : 12}>
                <Bar
                  data={graphData2}
                  width={80}
                  height={400}
                  options={options}
                />
              </Grid>
            ) : null}
          </Grid>
        </Grid>
      </Grid>
    </div>
  );