Same Row (not Bar) size for each row in horizontal bar chart

[manelmendez]

I use an HoritzontalBar component for all my charts in a list of items. So when I render the charts every one have a different number of rows in one of the axis.

There's a way to set the same "row width" to all the charts? (Not the same Bar width) (I still don't find the solution)

I expect the same width in the red lines

Thanks for the help!

Environment

• vue.js version: <2.4.4>
• vue-chart.js version: <3.2.1>
• npm version: <5.8.0>

[etimberg]

@manelmendez there currently is not a good way to achieve that other than making the chart a different size

[manelmendez]

@etimberg It would be a very good feature, because if you don't know how many rows are you going to have it's hard to calculate the graph size 👍

[LightningSrinivas]

I am Using chartJS for Lightning .i am also facing the same issue. can u please me anyone? tsvc48@hotmail.com

[josezulu]

Bump.

[Hedva]

Just make your chart bigger... So the first chart a canvas height of 500px (or whatever) And the second chart a canvas of 100px (or something)

Currently the chart just tries to fit within the canvas. So if you've more items on a chart with the same height, your bar will be smaller.. so just make your chart bigger.

[josezulu]

I have a varying amount of labels, so I set the height of the canvas element for the chart dynamically just before the chart is created:

$("#chart").attr("height", labels.length * 40);

Where 40 is the pixel height of each bar.

[manelmendez]

@Hedva but what happens if you don't know how much elements are going to be in the chart? I want to control the size depending on the number of rows

[josezulu]

@manelmendez see the post above yours, it should solve your question.

[kurkle]

It is not really hard to calculate the height of the chart based on the number of bars. Example: https://codepen.io/kurkle/pen/yLgLrxv

[peteruithoven]

I'm in the same predicament and it's actually not that easy to account for all variations inside a chart.

• Only some of my charts will have a x-axis title
• In some cases the x-axis ticks are rotated slightly because they are long, increasing the height of the ticks.
• Edge case: what if some padding of one of the relevant elements is adjusted

Having something that can adapt to these variations would require a way to query the height of different areas inside the chart.

[LeeLenaleee]

You can get all those values from chart.js itself. For the height of the X axis you can check chart.scales.x.height. This includes the tickMarkers, tickLabels and the scaleTitle.

Then you can check the options for the padding object and see how much padding the chart has to include that in your calculation. With these two numbers you should have all your variables accounted for: https://jsfiddle.net/Leelenaleee/syv5fau3/13/