highcharts multiline text inside donut piechart

Question

I'm trying to achieve centered multiline text within my highcharts donut pie chart. I want the first line to have a font size of 50px and the second line to have a font size of 25px.

Currently, I cannot get different font sizes on each line, nor can I get the text to center.

JSFiddle: https://jsfiddle.net/r7tp9wp6/

Here is how I render the title

 var r = this.renderer,
        x = this.series[0].center[0] + this.plotLeft,
        y = this.series[0].center[1] + this.plotTop;
      this.title = r.text('Top<br>Bottom', 0, 0)
        .css({
          fontSize: '25px',
          textAlign: "center",
        }).hide()
        .add();

Deep 3015 Deep 3015 · Accepted Answer · 2018-04-02T06:24:54

Update renderer with textAnchor:'middle'

 this.title = r.text('1,234 <br> <span style="font-size:25px">Calls Today</span>', 0, 0)
    .css({
      fontSize: '40px',
      textAnchor:'middle'
    }).hide()
    .add();

$(function() {

  Highcharts.setOptions({
    colors: ['#79CEB8', '#66041A', '#0099CC', '#1D3461']
  });

  var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'pie'
      },
      title: {
        align: 'center',
        verticalAlign: 'middle'
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      plotOptions: {
        pie: {
          shadow: false
        }
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
        }
      },
      series: [{
        name: 'Browsers',
        data: [
          ["Bypass", 10],
          ["No IVR", 20],
          ["Handled", 7],
          ["Required Operator", 7]
        ],
        size: '100%',
        innerSize: '80%',
        showInLegend: false,
        dataLabels: {
          enabled: true
        }
      }]
    },
    function addTitle() {

      if (this.title) {
        this.title.destroy();
      }

      var r = this.renderer,
        x = this.series[0].center[0] + this.plotLeft,
        y = this.series[0].center[1] + this.plotTop;
      this.title = r.text('1,234 <br> <span style="font-size:25px">Calls Today</span>', 0, 0)
        .css({
          fontSize: '40px',
          textAnchor: 'middle'
        }).hide()
        .add();

      var bbox = this.title.getBBox();
      this.title.attr({
        x: x - (bbox.width / 100),
        y: y
      }).show();
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width:c310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

highcharts multiline text inside donut piechart

1 Answers