react-chartjs-2中如何隐藏折线图X轴与Y轴的显示文本

坐标轴配置统一写在CHARTOPTIONS的scales字段下，react-chartjs-2 底层依赖 Chart.js v3 及以上版本，配置规则统一，不存在网上说的写法冲突问题。

要实现X轴、Y轴不显示任何文本内容，只需要把两个轴的刻度文本、轴标题的显示开关全部设为false即可，修改后的完整可运行代码如下：

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,
    },
  },
  // 坐标轴核心配置
  scales: {
    x: {
      // 隐藏底部X轴刻度数字/文本
      ticks: {
        display: false,
      },
      // 隐藏X轴标题文本（未主动设置时默认就是关闭状态，加上做兼容）
      title: {
        display: false,
      }
    },
    y: {
      // 隐藏左侧Y轴刻度数字/文本
      ticks: {
        display: false,
      },
      // 隐藏Y轴标题文本
      title: {
        display: false,
      }
    }
  }
};

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

如果有额外需求需要完全隐藏坐标轴的网格线、轴线本身，可以在对应轴的配置下追加两个属性：

• grid: { display: false }：隐藏对应轴方向的网格参考线
• border: { display: false }：隐藏对应轴的实体边线

比如完全隐藏X轴所有视觉元素的配置片段：

x: {
  ticks: { display: false },
  title: { display: false },
  grid: { display: false },
  border: { display: false }
}

内容的提问来源于stack exchange，提问作者awoldt