Chartjs-Chartjs force horizontal bar to start from the lowest value

by

0👍

✅

This can be done with a floating bar since Chart.js v2.9.0, a feature that was merged into chartjs:master with pull request #6056. Individual bars can now be specified with the syntax [min, max]. 

<html>
<head>
    <title>Floating Bar</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="50"></canvas>
    </div>
    <script>
    
      var percentage = 0.92;
      var min = -15;
      var max = 115;
      
      window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                  datasets: [{
                      data: [[min, percentage]],
                      fill: true,
                      backgroundColor: 'rgba(0, 0, 0, 1)'
                  }]
                },
                options: {
                    title: {
                        display: false
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    legend: {
                        display: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            ticks: {
                              min: min,
                              max: max
                            }
                          }],
                    }
                }
            });
        };
    </script>
</body>
</html>

Leave a comment