Create 3 quarter donut chart using Google Chart library

Question

I'm trying to make a donut chart like below using google chart library:

I found this article that makes half donut, but didn't find the code to create the one in my image. Can anyone help?

I guess, your tag should be `google-chart` not `google-chat` — canbax, Oct 23 '20 at 14:41

score 3 · Answer 1 · answered Oct 23 '20 at 14:50

Read here https://developers.google.com/chart/interactive/docs/gallery/piechart#removing-slices It simply says donut charts are just pie charts with pieHole values between 0 and 1. To remove some slices, it says

To omit a slice, change the color to 'transparent':

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
         legend: 'none',
          pieSliceText: 'none',
          pieHole: 0.4,
          pieStartAngle: 0,
          pieEndAngle: 180,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

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

Thanks, Canbax. This is helpful. – Jahedur Rahman Sep 17 '21 at 16:59 — Jahedur Rahman, Sep 17 '21 at 16:59

score 1 · Answer 2 · answered Oct 23 '20 at 14:54

Use pieSliceText and pieStartAngle with an empty data field;

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

function drawChart() {

    const data = google.visualization.arrayToDataTable([
        ['Skils', 'Skills level'],
        ['React', 6],
        ['HTML', 4],
        ['PHP', 2],
        [null, 12]
    ]);

    new google.visualization.PieChart(document.getElementById('chart_div')).
    draw(data, {
        title: "My Skills",
        slices: {
          3: {
            color: 'transparent'
          }
        },
        pieHole: 0.5,
        width: 600,
        height: 600,
        pieSliceText: 'value',
        pieStartAngle: 270,
    });
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Thanks, This is helpful. – Jahedur Rahman Sep 17 '21 at 16:59 — Jahedur Rahman, Sep 17 '21 at 16:59

Create 3 quarter donut chart using Google Chart library

2 Answers2