Chart JS horizontal bar chart width of bars and the chart

Question

I have a horizontal bar chart that is too tall for the page (i.e. the user has to scroll down to see the full chart) and there is only 4 bars on the chart.

I can reduce the widths of the bars successfully, by using either barThickness or category and bar percentage. The problem is this does not reduce the overall height of the chart, as it just creates more space between each bar.

How do I reduce the width of the bar AND the overall chart, so the user does not have to scroll?

Thanks

Answer 1

Set the height of the chart canvas element, either by specifying it directly in the canvas tag or by specifying max-height in CSS.

Relevant links:

• https://www.chartjs.org/docs/latest/#creating-a-chart
• Setting width and height

Answer 2

I managed to fix it, using a suggestion from another post. In the following code snippet, I added the line that set the canvas height:-

            $("#dvChart5").html("");
            var canvas = document.createElement('canvas');
            canvas.height = 100;
            $("#dvChart5")[0].appendChild(canvas);