2 equal graphics but with different number of elements

[fen31]

Hello,
Thank you very much for ChartJS because it has allowed me to embed adaptive charts on my site.
This is my problem. I have created a simple horizontal bar chart. The chart has a 21-item dataset. Looks great.
On the same page, I want to create a graphic with the same aesthetic but with fewer elements (7). Looks great but very thick bars. I want the second graphic to have the same aesthetic as the first. But when I decrease the width of the bars, there is a lot of spacing between bars.
What I can do? I want two graphs to keep the same width of bars and the same spacing between bars, regardless of the number of elements.
Thank you very much in advance.

[etimberg]

@LeeLenaleee @fen31 I'm using this as a test of GitHub's discussion features since this is normally the kind of question we'd redirect to Stack Overflow.

I don't know why the comments were lost, but my suggestion was to set the labels array to be 21 items long in both cases. That should create the same size bars, assuming that the canvases are the same size.

[LeeLenaleee]

The other option is to make the canvas 33.3334% of the width of the first one since it's 1/3 of the items

[fen31]

Thank you very much for the two answers. Both answers work fine.
The first answer works by putting the X axis in the top position, and then modifying the container style ->
.container {
overflow: hidden;
height: (adapatative: height).
}

The second answer works perfectly, but strangely, it works in reverse. The width of the first canvas is 400, so the width of the second canvas should be 1200. This works perfect.
Thank you very much again.