react-chartjs2：如何隐藏折线图中出现在图形线（不是 x / y 轴）上方的标签（不是出现在顶部的图例）？

Question

我想要图表的外观：

目前的样子：

组件代码：

function LineGraph() {

  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Filler,
    Legend
  );

  const data = {
    labels: [10, 20, 30, 40, 50, 60, 70],
    datasets: [
      {
        data: [50, 35, 45, 42, 70, 65, 100], // Add your data here
        pointRadius: 0,
        fill: 'origin', // This fills the area under the line
        backgroundColor: (context: any) => {
          const ctx = context.chart.ctx;
          const gradient = ctx.createLinearGradient(0, 0, 0, 200);
          gradient.addColorStop(0, "#EEECFE");
          gradient.addColorStop(1, "#EEECFE80");
          return gradient;
        }, // Set the color you want
        borderColor: '#A496FF', // Set the color of the line
        tension: 0.5,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false // This hides the legend

      }
    },
    scales: {
      x: { // Hides the x-axis labels
        display: false,
        ticks: {
          display: false
        }
      },
      y: { // Hides the y-axis labels
        display: false,
        min: 0,
        ticks: {
          display: false
        }
      },
    },
  };


  return (
    <div className="absolute bottom-0 px-[1.88rem] w-full h-[8.75rem]">
      <Line data={data} options={options} />
    </div>
  );
}

目标：隐藏/删除在线图上可见的标签，即我们看到的那些小数据标签（35、45、42 等）。

我尝试在

pointRadius: 0

下执行

x: { ticks: { display: false } }

和

options

，但没有帮助。我很确定后者与折线图上的标签无关。

1. 我在这里犯了什么错误？
2. 如何解决这个问题？

Answer 1

@uminder 指出的堆栈溢出帖子解决了我的问题。查看他的链接，内容更丰富。

正如@uminder 所回答的，Chart.js 默认情况下不绘制任何标签。我为我的另一个需要标签的圆环图激活了一个名为

chartjs-plugin-datalabels

的全局插件。

这里我需要进行以下更改以禁用插件在此图中工作：

options: {
  plugins: {
  // adding this to hide the datalabels.
  datalabels: {
      display: false
    }
  },
}