The text on the graph overlaps.

1 reply · opened Aug 18, 2021

MmindisitAug 18, 2021

I want to edit the 'HTML/charts-bar-horizontal.html' page.
I want to make the height bigger.
I tried fixing the 734 line but it didn't work on my smartphone.
<div class="bottommargin divcenter" style="max-width: 750px; min-height: 350px;">
<canvas id="chart-0"></canvas>
</div>

"min-height: 350px" Why doesn't this work?
I need 12 columns.
However, if you make 12 vertical letters, the letters will overlap.
I need many vertical values.
I want to use it on my phone.
Please tell me how.

SSemicolon WebSTAFFAug 19, 2021

Hello,

This is Definitely Possible. However, you cannot set a fixed height for the Chart but instead you will need to set the Aspect Ratio of the Chart. Simple add the aspectRatio: 1, JS Setting at the bottom of the Page in the Chart JS Settings. Example:
[ch_pre type="js"]window.onload = function() {
var ctx = document.getElementById("chart-0").getContext("2d");
window.myHorizontalBar = new Chart(ctx, {
type: 'horizontalBar',
data: horizontalBarChartData,
options: {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
rectangle: {
borderWidth: 2,
}
},
responsive: true,
aspectRatio: 1,
legend: {
position: 'right',
},
title: {
display: true,
text: 'Horizontal Bar Chart'
}
}
});

};[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard