[Chartjs]-Make a Histogram in Chart.js

by

21👍

✅

I believe you can get the result you want by using the max parameter on the ticks configuration of the x axes.

By using 2 different x axes with different maximums you can label the bars differently from how they’re drawn. Resulting in labeling the marks in between the bars without drawing an extra “empty” bar.

var ctx = document.getElementById("myChart").getContext('2d');
var dataValues = [12, 19, 3, 5];
var dataLabels = [0, 1, 2, 3, 4];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dataLabels,
    datasets: [{
      label: 'Group A',
      data: dataValues,
      backgroundColor: 'rgba(255, 99, 132, 1)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.3,
        ticks: {
            max: 3,
        }
     }, {
        display: true,
        ticks: {
            autoSkip: false,
            max: 4,
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

Leave a comment