如何调整react-chartjs-2标签间距以适配横向滚动并对齐上方关联图片

1. 外层包裹滚动容器 #

给图表组件外层嵌套对应容器，控制滚动和基础尺寸，保证每个标签/数据点有足够的间距：
如果是普通纵向图表，适配横向滚动：

<div style={{ overflowX: "auto", width: "100%" }}>
  {/* 120为单个数据点占用的宽度，可根据上方图片的间距自行调整数值 */}
  <div style={{ minWidth: `${labels.length * 120}px` }}>
    {/* 图表组件放在此处 */}
  </div>
</div>

如果是你当前使用的水平图表（数据集axis设置为'y'），调整为动态控制高度即可：

<div style={{ overflowY: "auto", height: "500px" }}>
  {/* 80为单个数据点占用的高度，可按需调整 */}
  <Line data={data} options={options} height={`${labels.length * 80}px`} />
</div>

2. 新增图表配置项 #

在现有代码基础上新增options配置，保证所有标签正常显示、间距符合预期：

const options = {
  // 关闭默认宽高比锁定，允许自定义尺寸
  maintainAspectRatio: false,
  scales: {
    y: {
      ticks: {
        // 标签和轴线的间距，可按需调整
        padding: 20,
        // 关闭自动跳过标签，强制显示所有数据对应的标签
        autoSkip: false
      },
      grid: {
        offset: true
      }
    },
    x: {
      ticks: {
        padding: 20,
        autoSkip: false
      }
    }
  }
}

3. 对齐调整 #

微调容器的单位宽度/高度数值、ticks.padding数值，直到图表数据点间距和上方图片区域的间距完全匹配即可。

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