CODEWITHSUNDEEP
javascripthighcharts
ForsakenHound
ForsakenHound

Reputation: 61

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/

Upvotes: 3

Views: 2737

Answers (1)

AM Douglas
AM Douglas

Reputation: 1903

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)

Upvotes: 3

Related Questions