Add new line in es6 inside a doughnut chart - reactjs

Question

i'm using chartjs and i've added the plugin for adding text inside this chart. My problem is that when i define text like this:
text: ${sectorsCounter}\ Sectors it didnt show the Sectors under the sectorsCounter. My desired output is like this:
The plugin i use for adding text is:
Chart.pluginService.register({
afterUpdate(chart) {
let helpers;
let centerConfig;
let globalConfig;
let ctx;
let fontStyle;
let fontFamily;
let fontSize;
if (chart.config.options.elements.center) {
helpers = Chart.helpers;
centerConfig = chart.config.options.elements.center;
globalConfig = Chart.defaults.global;
ctx = chart.chart.ctx;
fontStyle = helpers.getValueOrDefault(
centerConfig.fontStyle, globalConfig.defaultFontStyle
);
fontFamily = helpers.getValueOrDefault(
centerConfig.fontFamily, globalConfig.defaultFontFamily
);
if (centerConfig.fontSize) {
fontSize = centerConfig.fontSize;
} else {
ctx.save();
fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
ctx.restore();
}
const newChart = chart;
newChart.center = {
font: helpers.fontString(fontSize, fontStyle, fontFamily),
fillStyle: helpers.getValueOrDefault(
centerConfig.fontColor, globalConfig.defaultFontColor
)
};
}
},
afterDraw(chart) {
if (chart.center) {
const centerConfig = chart.config.options.elements.center;
const ctx = chart.chart.ctx;
ctx.save();
ctx.font = chart.center.font;
ctx.fillStyle = chart.center.fillStyle;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
ctx.fillText(centerConfig.text, centerX, centerY);
ctx.restore();
}
},
});
And when i the call of Doughnut chart is:
<Doughnut
data={sectorsData}
width={250}
height={250}
options={{
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
cutoutPercentage: 75,
elements: {
center: {
text: `${sectorsCounter}\ Sectors`,
fontColor: '#000000',
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
fontStyle: 'normal',
minFontSize: 25,
maxFontSize: 25,
}
},

Answer 1

Well, I see you haven't found your desired solution yet. SO, here's the solution...
add the following code after const centerY = (chart.chartArea.top + chart.chartArea.bottom)/2
in your plugin
let helpers = Chart.helpers;
let fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
let text = centerConfig.text.split('\ ');
ctx.fillText(text[0], centerX, centerY - fontSize / 2);
ctx.fillText(text[1], centerX, centerY + fontSize / 2);

Answer 2

See Escape notation:
let stringTemplateA = `-a
a-`;
let stringTemplateB = `-b\r\nb-`;
console.log(stringTemplateA);
console.log(stringTemplateB);