I am creating a bar chart usng chart.js and am trying to add a line break to the label for the dataset (which is used as a title for the whole bar chart). I see it is possible to pass an array for the labels for each piece of data which adds a line break but this does not seem to work for the top level label. I have included my code below.
processCharts[key] = new Chart(ctx, {
"type":"horizontalBar",
"data": {
"labels":["Actual", "Target"],
"datasets":[{
"label": key.split(" "),
"data":[actual, target],
"fill":false,
"backgroundColor":[
"#B3CE3A",
"#B1C1C8",
],
"borderWidth":1}]},
"options":
{ "responsive":"true",
"maintainAspectRatio": false,
"legend": {
boxwidth:
},
"scales":{
"xAxes":[{
"ticks":{
"beginAtZero":true,
callback: function(label, index, labels) {
return formatTime(label);
}
}}],
"yAxes": [{
"ticks": {
"padding": 0
}
}]
},
},
plugins: [{
beforeInit: function(chart) {
if (/\n/.test(chart.data.datasets[0].label)) {
chart.data.datasets[0].label = chart.data.datasets[0].label.split(/\n/);
}
}
}]
});
Unfortunately when it splits the key I get for example "Emergency,Change" where I want a newline between the words.
Any help would be much appreciated