CODEWITHSUNDEEP
csshighcharts
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

Highcharts.js - placing text into the center of donut

I am trying to place some text into the center of highcharts.js donut element, but no success after two hours of research. Looks like some simple css will do the job, but can't figure out the right syntax. Help please !!!

Here's the Fiddle

$(function() {
  $('#order_suggestions_graph_by_vendor').highcharts({
    credits: {
      enabled: false
    },
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    plotOptions: {
      pie: {
        innerSize: '60%'
      }
    },
    title: {
      text: 'Browser<br>shares<br>2015',
      align: 'center',
      verticalAlign: 'middle',
      y: 40
    },
    series: [{
      type: 'pie',
      name: 'Browser share',
      innerSize: '50%',
      data: [
        ['Firefox', 10.38],
        ['IE', 56.33],
        ['Chrome', 24.03],
        ['Safari', 4.77],
        ['Opera', 0.91], {
          name: 'Proprietary or Undetectable',
          y: 0.2,
          dataLabels: {
            enabled: false
          }
        }
      ]
    }]

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

<div>
  <div id="order_suggestions_graph_by_vendor"></div>
</div>

Upvotes: 1

Views: 2500

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

You're currently pushing the title down by 40px. To not do this, simply set the y position offset to 0:

title: {
  text: 'Browser<br>shares<br>2015',
  align: 'center',
  verticalAlign: 'middle',
  y: 40 // change this to 0
}

Amended JSFiddle demo.

Upvotes: 2

Related Questions