How to set minimum height for bars graph

Question

I am displaying a graph but when the value is less the graphs are not shown I want a minimum height so they can be displayed.

I am using chartjs to display the graphs.

      My html : 
    <canvas id="chartContainer"></canvas>

My angular code:

  $scope.options = {
        onClick: SPEND_BY_SUPPLIER,
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += tooltipItem.yLabel;
                    return label + " " + $scope.SPEND_SUP_LIST[0].CURRENCY_CODE;
                }
            }
        },
        scales: {
            xAxes: [
                {
                    ticks: {
                        callback: function (label, index, labels) {
                            return label +" " + $scope.SPEND_SUP_LIST[0].CURRENCY_CODE;
                        }
                    },
                    scaleLabel: {
                        display: true,
                    }
                }
            ]
        }
    };
    new Chart(document.getElementById("chartContainer"), {
        type: 'horizontalBar',
        data: {
            labels: $scope.label_SPEND_SUP_LIST,
            datasets: [
              {
                  backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                  data: $scope.data_SPEND_SUP_LIST
              }
            ]
        },
        options: $scope.options,
    });

I want to set mimimum height for those graphs whose values are very less,please support.

check this link I think it will help you, https://stackoverflow.com/questions/38512001/charts-js-graph-not-scaling-to-canvas-size — Mukesh Burnwal Mike, Aug 29 '19 at 11:29

score 0 · Answer 1 · answered Aug 30 '19 at 07:55

0

Your question is not very clear but perhaps you are looking for the beginAtZero tick option.

If this is not set to true then (at least) one of your points will be 'invisible' as it'll sit on the border of the chart area. This is because Chart.js will, by default, use the lowest value in your dataset as the min scale value.

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

answered Aug 30 '19 at 07:55

timclutton

12,682
3
33
43

@souravsahu Did this answer your question? – timclutton Sep 02 '19 at 09:13

How to set minimum height for bars graph

1 Answers1