How to change background color of inner area of Google Donut hole?

Question

I'm using Google Pie Chart API and trying to create this UI

This is what I have : Fiddle

I'm not sure how to change the color of the inner area of the circle.

According to the Google Chart API , I found that chartArea.backgroundColor is one of the Configuration Options , so I tried it in here

---

JS

  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,
          //chartArea.backgroundColor:'pink' // Try it here

      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

      chart.draw(data, options);
  }

Result, I still couldn't get to change the color.

Answer 1

After doing some research, the piehole is not able to be colored using Google's config.

The chartArea.backgroundColor that you speak of correlates to the entire area that the chart area takes up, not the PieHole, you have a few options however.

This is where it will cover without any solution and correct syntax

Example with no solutions .

Your second option is this, give the background a transparent background and use positioning to lay a div it behind your chart.

Example with div laid behind chart

As of right now, those seem to be the only option, i've read through the docs multiple times and there just isn't a way to specifically style the pieHole. Sorry it's not the solution you're looking for, but it will work, atleast.

<div class="piehole"></div>

.piehole{
    display:block;
    background:green;
    height:140px;
    width:140px;
    position:absolute;
    z-index:-1;
    border-radius:100%;
    top:27px;
    left:23px;
}

JS Config

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'
              };

Answer 2

I don't think this can be achieved with ease with google charts. I would recommend a different approach, maybe a SVG using an ellipse and some text-elements .

Thinking something like this .

Answer 3

if you don't want to use jQuery, you have another option is css3

Here is the example:

 circle { fill: yellowgreen; stroke: #655; stroke-width: 30; } 

 <svg width="100" height="100"> <circle r="30" cx="50" cy="50" /> </svg> 

Here is the full documentation http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

Demo Link :