Chartjs-How can I change the starting point of horizontal bars in Charts.js

by

0👍

✅

Bars with different orientation can be defined as floating bars. Individual bars are specified with the syntax [min, max]. This feature was introduced with Chart.js v2.9.0.

Given the base data being present in an array named data, you can generate the desired floating bar data through the method Array.map() as follows:

data.map(v => v < 100 ? [v, 100] : [100, v])

Please take a look at below runnable code snippet and see how it works.

const data = [50, 80, 120, 150];

new Chart('canvas', {
  type: 'horizontalBar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'data',
      data: data.map(v => v < 100 ? [v, 100] : [100, v]),
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>

Leave a comment