Add new line in es6 inside a doughnut chart

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,
            }
          },

ɢʀᴜɴᴛ · Accepted Answer · 2017-04-26T10:13:54.220

2

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);

edited Apr 26 '17 at 10:13

answered Apr 25 '17 at 14:58

ɢʀᴜɴᴛ

32,025
15
116
110

I'm afraid it's a bug of the plugin :( – RamAlx Apr 25 '17 at 15:08
My text should be defined like above: text:`${sectorsCounter}\ Sectors`, – RamAlx Apr 26 '17 at 11:55

score 1 · Answer 2 · answered Apr 25 '17 at 17:02

1

See Escape notation:

let stringTemplateA = `-a
a-`;

let stringTemplateB = `-b\r\nb-`;

console.log(stringTemplateA);
console.log(stringTemplateB);

answered Apr 25 '17 at 17:02

mikeapr4

2,830
16
24

I'll accept it as an asnwer! But i dont know if it works in my case. I think that the plugin has a bug – RamAlx Apr 26 '17 at 06:39
It appears your issue isn't relating to ES6 newlines, see here - http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wont-do-line-breaks - @gaand's answer is the solution you need – mikeapr4 Apr 26 '17 at 11:13

Add new line in es6 inside a doughnut chart

2 Answers2