[Chartjs]-Chart.js horizontal bar width

by

2👍

Simply increase the canvas height. For Example;

<canvas id="horizontalbar" height="1000px"></canvas>

1👍

You have the barThickness option as mentionned in the docs here -> http://www.chartjs.org/docs/#bar-chart-chart-options

1👍

While this is not an official fix, it worked for me. I took advice from this link, https://github.com/chartjs/Chart.js/issues/2787

I store all my values within multiple arrays, so count number of objects and multiply by a specific number and set height of your chart wrapper ( div around the chart ).

<div class="chart-wrapper horizontalBar" style="position: relative; height: 50vh;">
    <canvas id="chart-location"></canvas>
</div>

Then after the chart is drawn, set the height (location_labels is an array housing all my labels)

$( ".horizontalBar" ).height(location_labels.length * 30);

0👍

Just add height tag in canvas element. This solved for me.

<canvas id="Chart" height="50">

0👍

Try this

For most versions, this would solve it

import {Chart} from "chart.js"

Chart.defaults.datasets.bar.barThickness = 73;

//also try barPercentage, maxBarThickness

Leave a comment