如何为Chart.js水平柱状图设置柱子最小高度？

要强制设置水平柱状图中每个柱子的最小高度，可以通过以下两种方式实现：

方法1：固定柱子高度（推荐） #

在options.elements.bar中添加barThickness属性设置固定像素值，同时给图表容器添加垂直滚动样式，避免条目过多时溢出。

修改后的完整代码如下：

JavaScript代码 #

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    datasets: [
      {
        label: "Dataset 1",
        data: [100, 156, 200, 765, 654, 1876,76, 643, 445,123,543,123],
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)"
      },
    ]
  },
  options: {
    indexAxis: "y",
    elements: {
      bar: {
        borderWidth: 2,
        barThickness: 20 // 固定柱子高度为20px
      }
    },
    responsive: true,
    maintainAspectRatio: false, // 取消宽高比限制，让容器控制高度
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: "Chart.js Horizontal Bar Chart"
      }
    }
  }
});

HTML代码 #

<!-- 给容器添加固定高度和垂直滚动 -->
<div style="height: 400px; overflow-y: auto;">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

方法2：调整柱子占比 #

通过调整y轴的categoryPercentage和barPercentage参数，增加柱子在类别空间中的占比、减少间距，从而让柱子更粗。这种方式是自适应的，但当条目过多时仍可能被压缩：

options: {
  indexAxis: "y",
  scales: {
    y: {
      categoryPercentage: 0.9, // 柱子占类别空间的比例（范围0-1）
      barPercentage: 0.9       // 柱子占类别内可用空间的比例（范围0-1）
    }
  },
  // 其他原有配置...
}

说明 #

• 方法1的优势是强制保证柱子高度，适合条目数量较多的场景，通过滚动条查看全部数据。
• 方法2适合条目数量适中的场景，保持图表整体的自适应布局。

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