click to show donut chart pieces' information in center - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

click to show donut chart pieces' information in center

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Donut Highchart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <style id="compiled-css" type="text/css">

.stats {//from   www  .  j  a  v  a2s  . co  m
   width: 160px;
   height: 90!important;
   display: inline-block;
   z-index: 10;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
$(function() {
  // Create the chart
  addLabel = function(point) {
    $('.cLabel').remove();
    var text = point.name + ': ' + point.y,
      chart = point.series.chart,
      renderer = chart.renderer;
    chart.renderer.label(text, chart.chartWidth / 2, chart.chartHeight / 2).attr({
      'text-anchor': 'middle',
    }).addClass('cLabel').add();
  };
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie',
      events: {
        redraw: function() {
          var chart = this;
          $('.cLabel').attr({
            transform: 'translate(' + chart.chartWidth / 2 + ',' + chart.chartHeight / 2 + ')'
          })
        }
      }
    },
    title: {
      text: 'User diversity and their subtotals'
    },
    yAxis: {
      title: {
        text: 'User diversity and their subtotals'
      }
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        shadow: false,
        borderColor: "#000000",
        borderWidth: 0.6
      },
      series: {
        point: {
          events: {
            click: function() {
              addLabel(this)
            }
          }
        }
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.y + '<br>' + '<b>' + 'Subtotal: ' + '</b>' + this.point.subtotal + ' kr';
      }
    },
    series: [{
      data: [{
        name: 'Administrative Brugere',
        y: 4,
        subtotal: 7899.99,
        color: "#B83D5A"
      }, {
        name: 'Begr?nsede Brugere',
        y: 8,
        subtotal: 5799.99,
        color: "#9B344C"
      }, {
        name: 'Resource Bruger',
        y: 14,
        subtotal: 2399.99,
        color: "#7A293C"
      }, {
        name: 'Ressource',
        y: 18,
        subtotal: 1299.89,
        color: "#5C1F2D"
      }],
      size: '80%',
      innerSize: '82%',
      showInLegend: false,
      dataLabels: {
        enabled: false
      }
    }]
  });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div> 
      <span id="displayStats" class="stats"></span>  
   </body>
</html>

Related Tutorials