Highcharts donut chart with centered title

highcharts-donut-chart-with-centered-title.markdown

Highcharts donut chart with centered title

Highcharts donut chart with a centered title.

A Pen by thomas on CodePen.

License.

index.jade

#container

script.js

document.addEventListener("DOMContentLoaded", function() {
  var chart1 = new Highcharts.Chart({
    chart: {
      type: 'pie',
      renderTo: 'container'
    },
    title: {
      verticalAlign: 'middle',
      floating: true,
      text: 'CENTERED<br>TEXT'
    },
    plotOptions: {
      pie: {
        innerSize: '90%'
      }
    },

    series: [{
      data: [
        ['Firefox', 44.2],
        ['IE7', 26.6],
        ['IE6', 20],
        ['Chrome', 3.1],
        ['Other', 5.4]
      ]
    }]
  });
});

scripts

<script src="https://code.highcharts.com/highcharts.js"></script>

Just a notice, that this doesn't work with smaller charts https://codepen.io/anon/pen/vrvydd