Donut chart example

An example of a Google Donut Chart.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 300px; height: 300px;"></div>

CSS

#donut_single path {
	stroke-opacity: 1 !important;
}

JavaScript

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Savings Category', 'Savings'],
        ['Trade Savings', 11],
        ['Shipping Savings', 20],
        ['Bulk Savings', 12],
        ['Promo Savings', 12],
    ]);

    var options = {
        pieHole: 0.8,
        legend: 'none',
        height: '100%',
        width: '100%',
        pieSliceText: 'none',
        backgroundColor: '#f8f5f3',
        colors: ['#0066a6', '#54c0e8', '#cccccc', '#818181'],
        chartArea: {
            height: '90%',
            width: '90%',
        },
        slices: [{
            offset: 0.05
        }, {
            offset: 0.05
        }, {
            offset: 0.05
        }, {
            offset: 0.05
        }],
        tooltip: {
            trigger: 'selection'
        },
        pieResidueSliceColor: "yellow"
    };
	
	var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
    chart.draw(data, options);
	
};