react-chartjs-2 保持 x 轴始终为 0% 到 100%

Question

我正在尝试创建一个 react-chartjs-2 条形图。

我想保持 x 轴 始终 0% 到 100%。

现在图表仅显示 x 轴上的最大值百分比（如果 80% 是 x 值，则 x 轴最大值设置为 80）

scales: {
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
      max: 100%,
    },
    grid: {
      display: false, // Hide x grid
    },
  },
  y: {
    ticks: {
      color: "white",
    },
    grid: {
      display: false, // Hide y grid
    },
  },
},

Answer 1

查看 docs for the Chart component options they point to the Chart.js docs，其中最大比例设置在 scale 属性下，您可以在 ticks 属性中找到它，尝试：

...
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
    },
    grid: {
      display: false, // Hide x grid
    },
    max: 100,
  },
...

react-chartjs-2 保持 x 轴始终为 0% 到 100%

react-chartjs-2 keep x axis always 0% to 100%

reactjs

chart.js