[Chartjs]-Adding Vertical scroll bar in a bar-chart (chartjs)

by

0👍

We can’t set a min width or height to the chart bars, so we will set the height of the containing div instead.
In the HTML:

    <div style="height:250px; overflow-y: scroll; position: relative">
            <div id="canvasContainer">
                    <canvas></canvas>
            </div>
    </div>

Then add a Javascript function that calculates the height of the canvasContainer div based on the number of bars available and the min height of every bar:

    function calcHeight (numOfBars) {
            var maxHeightOfChart = 250;
            var minHeight = 40; //setting the min height of the bar + margin between
            var chartHeight = minHeight * numOfBars > maxHeightOfChart ? minHeight * numOfBars : maxHeightOfChart;
            document.getElementById("canvasContainer").style.height = chartHeight.toString()+"px";
    }

Leave a comment