You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "bar",
// The data for our dataset
data: {
labels: [
"0k-40k",
"40k-80k",
"80k-100k",
"100k-120k",
"120k-160k",
"160k-180k",
"180k-220k"
],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: [0, 10, 5, 2, 20, 30, 45]
}
]
},
// Configuration options go here
options: {
legend: {
display: false
},
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
fontSize: 16,
fontStyle: "bold",
precision: 2,
suggestedMin: 0
},
scaleLabel: {
display: true,
fontSize: 16,
fontStyle: "bold",
labelString: "Chart Label X",
}
}
],
yAxes: [
{
ticks: {
fontSize: 16,
fontStyle: "bold",
precision: 2,
suggestedMin: 0
},
scaleLabel: {
display: true,
fontSize: 16,
fontStyle: "bold",
labelString: "Chart Label Y",
}
}
]
}
}
});
Context
This appears to be a bigger issue on small screens as in the code example above. I've tried playing around with padding and max / min rotation, but forcing the labels to be rotated 90 degrees results in more of the label being cut off.
Is there a way to disable this change? I recently upgraded from Chart.js v2 to v3, and this causes issues when rendering real-time charts, causing the chart to resize as the tick labels approach the border.
Expected Behavior
Canvas should resize to allow space for labels, labels should not overlap.
Current Behavior
Long labels are cropped by edge of canvas, labels overlap axis labels.
Steps to Reproduce (for bugs)
https://codepen.io/afisher88/pen/mayvoe
Code:
Context
This appears to be a bigger issue on small screens as in the code example above. I've tried playing around with padding and max / min rotation, but forcing the labels to be rotated 90 degrees results in more of the label being cut off.
Stack overflow question:
https://stackoverflow.com/questions/53710268/chartjs-tick-label-overlaps-axis-label
Environment
The text was updated successfully, but these errors were encountered: