Issue in legends of Labeled Google Corechart

Question

I'm working with Google Core charts to plot my data. I had specific custom requirement for the chart, which is donet chart with labeled legends.

I have achieved the same but the issue is when there are certain value on the pie close to each other the one of the legend goes missing.

Below is the jsfiddle example : https://jsfiddle.net/mudass1rk/270cdraq/1/

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     98],
          ['Eat',      2],
          ['Commute',  4],
          ['Watch TV', 5]
        ]);

        var options = {
            pieHole: 0.75,
            backgroundColor: { fill: 'transparent'},
            pieSliceBorderColor: "black",
            legend: {
                position: 'labeled',
                textStyle:{
                    color: 'white'
                },
                alignment: 'center'
            },
            
            pieSliceText: 'none',
            pieStartAngle: 0,
            height: 300,
            //width: 300,
            chartArea:{top:40},
            // tooltip: {trigger: 'selection'},
            slices: [{color: '#00DBD1'}, {color: '#61F28F'}, {color: '#61F28F'}, {color: '#FFD100'}, {color: '#FF6B1A'}, {color: '#EB1212'}]
        };

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

        chart.draw(data, options);
      }

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

Thanks a lot in advance.

Answer 1

this is a limitation of the chart.
not much you can do but make the chart bigger.

the chart does not automatically adjust to the max size available on the container.
in this case, you have the container set to 900 x 500.
you can adjust the chart area option to provide more room,
along with the height and width options...

    chartArea: {
      top: 40,
      height: '100%',
      width: '100%',
      left: 100,
      right: 100
    },
    height: '100%',
    width: '100%',

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 98],
    ['Eat', 2],
    ['Commute', 4],
    ['Watch TV', 5]
  ]);

  var options = {
    pieHole: 0.75,
    backgroundColor: {
      fill: 'transparent'
    },
    pieSliceBorderColor: "black",
    legend: {
      position: 'labeled',
      textStyle: {
        color: 'white'
      },
      alignment: 'center'
    },
    pieSliceText: 'none',
    pieStartAngle: 0,
    chartArea: {
      top: 40,
      height: '100%',
      width: '100%',
      left: 100,
      right: 100
    },
    height: '100%',
    width: '100%',
    slices: [{
      color: '#00DBD1'
    }, {
      color: '#61F28F'
    }, {
      color: '#61F28F'
    }, {
      color: '#FFD100'
    }, {
      color: '#FF6B1A'
    }, {
      color: '#EB1212'
    }],
  };

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

#piechart {
  height: 500px;
  width: 900px;
}

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