JavaScript: Donut Chart Inside another Donut Chart

How to embed a donut chart inside another donut chart?

To make a chart as shown above we have to use separate donut charts and align them in such a way that they look as one chart is inside another.

Well it is possible through a simple CSS trick which designers miss…

Let’s see,

We have used google charts api here.

HTML:

<div id="donutchart1" style="width: 400px; height: 200px;">

 <div id="donutchart2" style="width: 430px; height: 250px;">

CSS:

#donutchart1{
      margin-top: 98px;
    margin-left: 38%;
}
#donutchart2{
  margin-top: -225px;
    margin-left: 200px;
}

JavaScript:

google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart1);
      google.charts.setOnLoadCallback(drawChart2);
      
      //callback function for inner chart
      function drawChart1() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
         // title: 'My Daily Activities',
          pieHole: 0.3,
          legend:'none',
          backgroundColor:'transparent',
	  pieSliceText:'none',
          chartArea:{left:0,top:0, bottom:0,right:0,width:"80%",height:"80%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart1'));
        chart.draw(data, options);
      }
      //callback function for outer chart
       function drawChart2() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     56],
          ['Sleep',    44]
        ]);

        var options = {
         // title: 'My Daily Activities',
          pieHole: 0.85,
          legend:'none',
          pieSliceText:'none',
          backgroundColor:'transparent',
          chartArea:{left:0,top:0, bottom:0,right:0,width:"80%",height:"80%"},
          colors:['red','lightgrey']
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart2'));
        chart.draw(data, options);
      }

 

So the main thing is,

by default the background of the graph div element is “white”. For this to work we have to change it to transparent (backgroundColor:’transparent’) especially for inner graph and use css to make it overlap with outer graph and hence inside it.

Here is JsFiddle for above graph.