ForsakenHound ForsakenHound - 1 month ago 7
Javascript Question

How to remove outer shadow when hovered from highcharts JAVASCRIPT

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/

Answer

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)

Comments