Chart.js 3.x单数据集水平柱状图如何在上下两侧同时显示X轴

问题原因 #

你当前定义的x和x1是两个完全独立的X轴，只有默认的x轴绑定了数据集，会根据数据集的数值范围自动计算刻度，而x1轴没有绑定任何数据源，也没有和已有X轴做关联，默认使用0-1的刻度区间，自然和底部X轴的数值不匹配。

解决方法 #

Chart.js 3.x 提供了linkedTo刻度配置项，可以直接将新增的X轴和原有X轴绑定，自动同步刻度范围、步长等所有配置，不需要修改原有数据集，单数据集场景下也可以正常使用。

你只需要在原有配置的x1轴配置中增加linkedTo: 'x'，同时可以关闭新增轴的网格线绘制，避免和原有网格线重复，修正后的完整代码如下：

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{    
      data: [1, 3, 6, 2, 8, 9],
      borderColor: '#00D',
    }]
  },
  options: {
    indexAxis: "y",
    scales: {
      x: {},
      x1: {
        position: 'top',
        linkedTo: 'x', // 和底部X轴绑定，自动同步刻度
        grid: {
          drawOnChartArea: false // 不重复绘制网格线
        }
      }
    }
  }
});

canvas {
  max-height: 180px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

配置完成后，顶部X轴会和底部X轴的刻度完全同步，符合使用需求，该方案同样适用于水平柱状图等其他需要双X轴的单数据集场景。

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