Change background color of inner area of Google Donut hole chart - Javascript Google Chart

Javascript examples for Google Chart:Donut Chart

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

Description

Change background color of inner area of Google Donut hole chart

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"> 
      <style id="compiled-css" type="text/css">

.piehole{/*from  www . j  a va2  s .  c o m*/
   display:block;
   background:green;
   height:140px;
   width:140px;
   position:absolute;
   z-index:-1;
   border-radius:100%;
   top:27px;
   left:23px;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="piechart" style="width: 200px; height: 200px;"></div> 
      <div class="piehole"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['Work', 11]
          ]);
          var options = {
              width: 160,
              height: 160,
              chartArea: {
                  left: 10,
                  top: 20,
                  width: '100%',
                  height: '100%'
              },
              colors: ['#F46E4E', '#F9C262', '#ADB55E', ],
              legend: 'none',
              enableInteractivity: false,
              pieSliceText: 'none',
              pieHole: 0.85,
              backgroundColor:'transparent'
          };
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
          chart.draw(data, options);
      }

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

Related Tutorials