如何使用react-chartjs-2删除X和Y轴

Question

我在任何地方都找不到解决方案，这让我发疯。我有一个使用react-chartjs-2包的折线图。这就是我的代码的样子：

const CHARTDATA = {
    labels: dates,
    datasets: [
      {
        backgroundColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        borderColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        data: prices,
      },
    ],
  };

  const CHARTOPTIONS = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
        
      },
     
    },
  };

  return <Line data={CHARTDATA} options={CHARTOPTIONS} />;

所有这些工作正常，但我不知道如何自定义轴（y 和 x）。我要做的就是删除两个轴标题，这样左侧（y 轴）或底部（x 轴）就没有文本。我猜它在CHARTOPTIONS中的某个地方，但不太确定。我在网上发现了很多相互矛盾的答案，老实说，我认为这个包的文档很糟糕。有谁知道如何自定义轴？

Answer 1

在React-chartjs-2中，如果你想隐藏轴标签，你必须配置chartOptions。

以下是隐藏标签的方法，当然您可以通过检查示例来尝试许多其他选项。

React-chartjs-2 示例

const CHARTOPTIONS = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
  },

  // Modify the axis by adding scales
  scales: {
    // to remove the labels
    x: {
      ticks: {
        display: false,
      },

      // to remove the x-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
    // to remove the y-axis labels
    y: {
      ticks: {
        display: false,
        beginAtZero: true,
      },
      // to remove the y-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
  },
};