I'm having a hard time making the labels in the y-axis responsive.I want the labels to move to multiple lines and have responsive font sizes when the space is not enough.I'm using the chart.js datalabels library for labelling on top of horizontalBar Graph.Also the labels are getting hidden due to the outer chart container.
var chart = new Chart('ctx', {
type: 'horizontalBar',
data: {
labels: ["Something something something", "blah blah..", "blah blah..","Something something something"],
datasets: [{
data: [6, 87, 56,25,100,65],
backgroundColor: "#4082c4"
}]
},
options:{
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
color: 'black',
anchor: "end",
align: "right",
offset: 20,
display: function (context) {
return context.dataset.data[context.dataIndex];
},
font: {
weight: 'bold',
size: 26
},
formatter: Math.round
}
},
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
barPercentage: 1.0,
gridLines: {
display: false
},
ticks: {
fontSize: 20,
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
}
})
The numbers in the right side of the bar also gets clipped of.I want the chart to be at the center horizontally.In the browser the chart looks like this-
Link to the fiddle:-https://jsfiddle.net/24wdpfxL/