How to make google pie chart api background transparent

Question

this is the google code for pie char apt:

<script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var options = {backgroundColor: '#676767',
                       'width':400,
                       'height':300};

        var chart = new google.visualization.PieChart(document.getElementById('priority_customers_report'));
        chart.draw(data, options);
      }
    </script>

Here the backgroundColor: '#676767' gives us the color now I want it to be transparent, how can I do that?

And how to set the text in bottom? As it's not clear in Google Documentation, really tough to understand.

This is related to the Simple Pie Chart of Google

Answer 1

The transparent background can be set with:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300};

You can also set the title there:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300,
                   'title' : 'My Chart'};

Edit: To set the right hand items to show at the bottom use:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300,
                   'title' : 'My Chart'
                   legend : { position : 'bottom' }
                   };

The list of possible options are here.