Chartjs-Lost column of bar chart in Chart.js

by

0👍

I can’t tell for certain based on your screenshot, but I suspect that the chart is actually much taller than you can see but it is being hidden by its container (perhaps with overflow hidden). If you turn off the "responsive" option on the chart then you might find that you’re able to see the entire chart. I’ve found that the "responsive" option usually means that the chart is much taller than I’d expect.

//WidgetChart 5
var ctx = document.getElementById("widgetChart5");
if (ctx) {
  ctx.height = 220;
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [{
        label: "My First dataset",
        data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50],
        borderColor: "transparent",
        borderWidth: "0",
        backgroundColor: "#ccc",
      }]
    },
    options: {
      responsive: false,
      maintainAspectRatio: true,
      legend: {
        display: false
      },
      scales: {
        x: {
          display: false,
          categoryPercentage: 1,
          barPercentage: 1
        },
        y: {
          display: false
        }
      }
    }
  });
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id=widgetChart5 height="240" width="320"></canvas>

Leave a comment