I'm using angular ng-apexcharts
and I need to display the datalabels
in two lines.
I try to use "\n"
but still can't make it as 2 lines
dataLabels: {
enabled: true,
formatter: function (val, opts) {
var duration = opts.w.config.series[opts.seriesIndex]
var h = Math.floor(duration / 3600);
var m = Math.floor(duration % 3600 / 60);
var s = Math.floor(duration % 3600 % 60);
var hDisplay = h > 9 ? h : "0" + h;
var mDisplay = m > 9 ? m : "0" + m;
var sDisplay = s > 9 ? s : "0" + s;
if (h > 0) {
return hDisplay + ":" + mDisplay + "\n" + "hours";
}
else {
return mDisplay + ":" + sDisplay + "\n" + "minutes";
}
},
},
You can use this structures: ["first line text", "second line text"]
dataLabels: {
enabled: true,
formatter: function (val, opts) {
var duration = opts.w.config.series[opts.seriesIndex]
var h = Math.floor(duration / 3600);
var m = Math.floor(duration % 3600 / 60);
var s = Math.floor(duration % 3600 % 60);
var hDisplay = h > 9 ? h : "0" + h;
var mDisplay = m > 9 ? m : "0" + m;
var sDisplay = s > 9 ? s : "0" + s;
if (h > 0) {
return [hDisplay + ":" + mDisplay , "hours"];
}
else {
return [mDisplay + ":" + sDisplay , "minutes"];
}
},
},
Here is working sample on codesandbox
And the result: