Donut Chart text in center change on hover - Javascript highcharts

Javascript examples for highcharts:Donut Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Donut Chart

Description

Donut Chart text in center change on hover

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from w  ww . j  a  v  a2  s.  c  om*/
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'vacation-time-chart',
            type: 'pie',
            height: 250,
            width: 250,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: false,
        plotOptions: {
            pie: {
                borderWidth: 6,
                startAngle: 90,
                innerSize: '55%',
                size: '100%',
                shadow: true,
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                events: {
                    mouseOver: function(){
                        this.series.chart.innerText.attr({text: this.y});
                    },
                    mouseOut: function(){
                        this.series.chart.innerText.attr({text: 112});
                    }
                }
                }
            }
        },
        series: [{
            data: [
                {y:40, color: colors[0]},
                {y:0, color: colors[1]},
                {y:60, color: colors[2]}
            ]
        }]
    },
     function(chart) { // on complete
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    chart.innerText = chart.renderer.text('112', 112, 125).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            zIndex: 999
        }).add();
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials