Pie chart Legend - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Pie chart Legend

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Pie No Ledgend</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*w  ww . j  a  v  a  2 s. c o  m*/
$(function() {
  var myChart = Highcharts.chart('pieContainer', {
    credits: {
      enabled: false
    },
    title: {
      text: ''
    },
    legend: {
    },
    tooltip: {
      followPointer: true,
      hideDelay: 100,
      formatter: function() {
        return '<b>' + this.point.name + ':</b><br/> ' + this.y.toLocaleString() + ' Facilities <br/>' + this.percentage.toFixed(1) + ' %';
      }
    },
    plotOptions: {
      pie: {
        dataLabels: {
        enabled: true,
        connectorWidth: 1,
        distance: 25,
        style: {
          color: "contrast",
          fontSize: "11px",
          textOutline: "none", //"1px contrast",
        },
        formatter: function() {
          return this.point.name + ':<br/> ' + this.percentage.toFixed(1) + ' %';
        }
      },
      showInLegend: true
      }
    },
    series: [{
      type: 'pie',
      name: 'Outside Name',
      "data": [{
          "y": 6708,
          "name": "Targeted",
          "sliced": false,
          "selected": false,
          "color": "#FF5733",
        }, {
          "y": 24622,
          "name": "Non-Targeted",
          "sliced": true,
          "selected": true,
          "color": "#D4D3D2",
        }, {
          "y": 4057,
          "name": "Participating",
          "sliced": false,
          "selected": false,
          "color": "#3EA457",
        }],
    }]
  });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="pieContainer" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials