Chart.js柱状图高度不足求助：数据标签被截断

使用Chart.js渲染柱状图时，其余功能正常，但图表垂直高度不足，导致数据显示异常——100%的标签被截断，仅显示“1”。尝试过在div标签中设置高度，以及开启responsive:true，但会导致图表严重拉伸，标签、柱状条等元素模糊不清。

现有代码 #

JavaScript代码 #

document.addEventListener("DOMContentLoaded", function() {
    var patternSize = 20;
    // Bar chart
    new Chart(document.getElementById("mychart"), {
        type: "bar",
        data: {
            labels: ["1.1","1.2","1.3","1.4","1.5","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","3.1","3.2","3.3","3.4","3.5","4.1","4.2","4.3","4.4","4.5",],
            datasets: [{
                label: "Progress",              
                backgroundColor:"#ff0000",
                data: [74.5,70.8,20,16.7,0,90,43.3,17.8,37.5,100,11.3,4.6,0,100,12.5,0,15,0,44.4,0,0,0,20,],        
            }
        ]
        },
        options: {  
//          responsive: true,           
            maintainAspectRatio: false, 
            legend: {
            display: true,
            position: 'bottom',
            },      
            scales: {
                yAxes: [{
                    gridLines: {
                        display: true
                    },
                    stacked: false,
                    ticks: {
                        stepSize: 20,
                        callback: function(value, index, ticks) {
                        return  value + '%';
                        }
                    },
                    scaleLabel: {
                        display: true,
                        fontSize: 18,
                        fontColor:"#000000",
                        fontStyle: "bold",
                        labelString: 'Percentages'
                    }
                }],
                xAxes: [{
                    stacked: false,
                    gridLines: {
                        display:false
                    },              
                    ticks:{
                        maxRotation: 90,
                        minRotation: 90,
                    },          
                    scaleLabel: {
                        display: true,
                        fontSize: 18,
                        fontColor:"#000000",
                        fontStyle: "bold",
                        labelString: 'ACTIVITY'                         
                    }
                }]
            },
        }, //end options
/**value on top of bar**/

plugins: {
      
      afterDatasetsDraw: function (context, easing) {
        var ctx = context.chart.ctx;
        context.data.datasets.forEach(function (dataset) {
          for (var i = 0; i < dataset.data.length; i++) {
            if (dataset.data[i] != 0) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
              var textY = model.y + (dataset.type == "line" ? -3 : 15);

              ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'start';
              ctx.textBaseline = 'middle';
              ctx.fillStyle = dataset.type == "line" ? "black" : "black";
              ctx.save();
              ctx.translate(model.x, textY-15);
              ctx.rotate(4.7);
              data=" "+dataset.data[i]+"%";
              ctx.fillText(data, 0, 0);
              ctx.restore();
            }
          }
        });
      }
    
  }                                                 
/**end value on top of bar**/
    });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="chart chart-lg" id="chart-wrapper">
<canvas id="mychart"></canvas>
</div>

• 给容器设置固定高度+保留响应式
  开启responsive: true，给图表容器#chart-wrapper设置合适的固定高度，同时保持maintainAspectRatio: false，这样图表会自适应容器尺寸，不会模糊：

  #chart-wrapper {
      height: 600px;
      width: 100%;
  }
  

• 调整Y轴顶部内边距
  在Y轴配置中添加ticks.padding，预留足够空间显示顶部标签：

  yAxes: [{
      // 其他现有配置...
      ticks: {
          padding: 20, // 增加顶部内边距
          stepSize: 20,
          callback: function(value, index, ticks) {
              return value + '%';
          }
      }
  }]
  

• 优化顶部标签绘制位置
  自定义标签的代码中，调整textY的偏移值，让标签更靠上，避免被截断：

  var textY = model.y + (dataset.type == "line" ? -10 : 5); // 减少向下偏移量
  

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