I am after getting rid of the shadow around the highchart I have made, there is currently a shadow when hovered over the area of the pie chart like in this image:
I am also after getting text in the center of the pie chart.
Example
Here is the code:
$(function() {
// Create the chart
Highcharts.setOptions({
colors: ['#26d248', '#323232']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'summoner-pie-container',
type: 'pie',
backgroundColor:'transparent'
}, plotOptions: {
series: {
marker: {
states: {
hover: {
enabled: false
}
}
}
},
pie: {
borderWidth: 0
}
},
title: {
text: '',
style: {
display: 'none'
}
}, credits: {
enabled: false
}, exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
series: [{
data: [["Damage Dealt",34000],["Team Damage Dealt",86423]],
size: '60px',
innerSize: '70%',
dataLabels: {
enabled: false
}
}]
});
});
http://jsfiddle.net/HpdwR/1994/
In your tooltip settings:
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
You need to add shadow: false
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
},
shadow: false
}
Also, in your plotOptions you need to essentially remove the marker layer in the object, like so:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
},
(Working Fiddle)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With