Display label and values only on google pie chart legend with data - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

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

Description

Display label and values only on google pie chart legend with data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Pie Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="piechart" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {//from  ww  w.j  a v  a2  s  .co m
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work (11)',     11],
          ['Eat (2)',      2],
          ['Commute (2)',  2],
          ['Watch TV (2)', 2],
          ['Sleep (7)',    7]
        ]);
        var options = {
          title: 'My Daily Activities',
          legend: {position: 'right'} ,
           };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials