donut chart - with inner text
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div>
<div id="container" style="position:absolute; left:0px; top:0px;"></div>
<div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>
JavaScript
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
tooltip: {
enabled: true
},
legend: {
enabled: true
},
plotOptions: {
pie: {
innerSize: '80%'
},
series: {
cursor: 'pointer',
point: {
events: {
mouseOver: function(){
// console.log(this)
defineInnerData(this.name, this.y, this);
}
}
},
states: {
hover: {
enabled: true
}
}
}
},
yAxis: {
title: {
text: "sdsd"
},
labels: {
enabled: true
}
},
series: [{
dataLabels: {
enabled: true
},
data: [
['Firefox <img style="width:100px" src="https://www.instaca.in/images/help-icon.png"/>', 44.2],
['IE7 <img style="width:100px" src="https://www.instaca.in/images/like-thumb.png"/>', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
});
function defineInnerData(name, y, obj) { // on complete
var chart=$("#container").highcharts();
$( "#pieChartInfoText" ).remove();
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;left: 235px;top:210px;width: 130px;">';
// span += '<span style="font-size: 15px">'+ y +'</span><br>';
span += '<span style="font-size: 12px">'+ name +'</span>';
//...