score:2

Accepted answer

floating bars are officially available since chart.js v2.9.0. the feature was merged into chartjs:master with pull request #6056. individual bars can now be specified with the syntax [min, max].

enter image description here

<html>

<head>
  <title>floating bars</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div>
    <canvas id="canvas" height="100"></canvas>
  </div>
  <script>
    window.onload = function() {
      var ctx = document.getelementbyid('canvas').getcontext('2d');
      window.mybar = new chart(ctx, {
        type: 'horizontalbar',
        data: {
          labels: [1, 2, 3, 4, 5],
          datasets: [{
            label: 'data',
            data: [[-3, 5], [2, 10], [1, 3], [-4, -1], [4, 8]],
            backgroundcolor: 'lightblue'
          }]
        },
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'horizontal floating bars'
          }
        }
      });
    };
  </script>
</body>

</html>


Related Query

More Query from same tag