Edgar Navasardyan Edgar Navasardyan - 1 month ago 14
CSS Question

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>




Answer

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.

Comments