[Chartjs]-How to make customized stepSize for each horizontal bar in Chart.js graph

by

4👍

✅

Your problem is not related to ticks.stepSize, this option simply controls how to create the ticks but doesn’t change the size of the bars.

You can define the x-axis as a logarithmic cartesian axis as shown in the runnable code snippet below.

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['0-12 hr', '12-24 hr', '1-3 day', '3-15 day'],
    datasets: [{
      label: '',
      data: [20, 0, 0, 34343],
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)"],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'logarithmic',
        ticks: {
          beginAtZero: true,
          userCallback: (value, index) => {
            const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
            if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
              return value.toLocaleString();
            }
            return '';
          }
        },
        gridLines: {
          display: false
        }
      }]
    }    
  }  
});
canvas {
  max-width: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart" height="150"></canvas>

Leave a comment