Center of the chart (pieChart)
I want to set the pieChart title in the middle of the circle as follows http://jsfiddle.net/NVX3S/1036/ .
title: {
text: 'aSD<br>500 ASD.',
align: 'center',
verticalAlign: 'middle',
}
But: title.align is svg container option, not chart alignment! (Imagine what happens if there is a legend about the chart to the left of the chart - the chart name will not be placed in the middle of the chart)
I was looking for a solution to this problem but only found this one: http://jsfiddle.net/NVX3S/2/
var textX = chart.plotLeft + (chart.plotWidth * 0.5);
var textY = chart.plotTop + (chart.plotHeight * 0.5);
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';
$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
Instead of a header using a span element with text centered across:
chart.plotLeft, chart.plotTop, chart.plotWidth, chart.plotHeight, which I cannot get because using TypeScript abstraction.
Does anyone have any ideas how to center the title (or text) in the pieChart (chart) ??? Thank.
source to share
The center of the pie can be calculated using the series center matrix (x and y coordinates), plotLeft and plotTop. Using renderer.text text can be added. When the event is redrawn, the additionally displayed text should be adjusted to stay in the center of the pie. Example: http://jsfiddle.net/1917s4pL/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
load: function () {
var chart = this,
x = chart.plotLeft + (chart.series[0].center[0]),
y = chart.plotTop + (chart.series[0].center[1]),
box;
chart.pieCenter = chart.renderer.text('aSD<br>500 ASD.', x, y, true)
.css({
'text-align': 'center',
color: 'black',
fontSize: '16px'
})
.add();
box = chart.pieCenter.getBBox();
chart.pieCenter.attr({
x: x - box.width / 2,
y: y - box.height / 4
});
},
redraw: function () {
var chart = this,
x = chart.plotLeft + (chart.series[0].center[0]),
y = chart.plotTop + (chart.series[0].center[1]),
box = chart.pieCenter.getBBox();
chart.pieCenter.attr({
x: x - box.width / 2,
y: y - box.height / 4
});
}
}
},
plotOptions: {
pie: {
innerSize: '40%'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
},
series: [{
showInLegend: true,
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
source to share