Canvas should resize to allow space for labels, labels should not overlap.
Long labels are cropped by edge of canvas, labels overlap axis labels.
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",
}
}
]
}
}
});
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.
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