[Chartjs]-JsChart height issue

by

0👍

✅

I have tried your use case and the issue is not the clip but there is not space on top of chart area to draw your labels. You should add padding on top of the chart in order to show the labels, by options.layout.padding configuration.

const ctx = document.getElementById("myChart");   
var patternSize = 21;
Chart.plugins.register({
  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();
        }
      }
    });
  }
});
const chart = new Chart(ctx, {
  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: {  
        layout: {
          padding: {
            top: 50
          }
        },
        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' 
            }
          }]
        }
    },
});
.myChartDiv {
  max-width: 617px;
  max-height: 250px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.4.0/dist/Chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="617" height="250"/>
    </div>
  </body>
</html>

Leave a comment