如何在react-chartjs-2中的条形图顶部显示数据值？

Question

我在react-chartjs-2中制作了条形图。我想在条形顶部显示每个条形的数据值。为此，我使用了名为Chartjs-plugin-datalabels 的插件，但它没有显示任何内容。

是否可以显示条形图的每个值？

我想展示这样的数据价值。

这是我的代码。

import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  render() {
    const dataBar = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "#EC932F",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };

    const options = {
      plugins: {
        datalabels: {
          display: true,
          color: "black"
        }
      },
      legend: {
        display: false
      }
    };
    return (
      <div>
        <Bar data={dataBar} options={options} width={100} height={50} />
      </div>
    );
  }
}

任何帮助，将不胜感激。

Answer 1

使用这个"chartjs-plugin-datalabels": "^0.5.0"版本

这个对我有用

这是工作示例

https://codesandbox.io/s/barchart-knycb