Place the data label outside pie slice

[Praveen Kumar]

Hi All,

I am working with gvisPieChart. By default the pieSliceText  are placed in the slice,but i could like the pieSliceText to  be outside the slice.attaching the sample pie for reference.

[Steven Lovell]

Hi Praveen,

Have you tried something like this? It puts the actual value in the Pie and the percentage outside, perhaps you can use this as a base to work with to see if you can get the end result you want.

Regards,

Steve.

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Amount'],
    ['Spanish', 87.1],
    ['Portuguese', 102],
    ['Other', 13.2]
   ]);

  var options = {
    width: 900,
    height: 400,
    title: 'Languages',
  
    colors: ['#008000', '#ffbf00', '#FF0000'],
    pieSliceText: 'value',
    sliceVisibilityThreshold :0,
    fontSize: 17,
    legend: {
      position: 'labeled'
    },
  };

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

[Steven Lovell]

Hi Praveen,

I've made a few amendments to see if this is more to your liking.

Regards,

Steve.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Amount'],

    ['Spanish', 3.2],
    ['Portuguese', 2.2],
    ['Other', 3.2],
    ['A', 87.1],
    ['B', 4.3]
   
   ]);

  var options = {
    width: 800,

    height: 400,
    title: 'Languages',

    pieStartAngle: 100,
    pieSliceTextStyle: {
            color: 'none',
          },
    colors: ['#FB8072','#BEBADA', '#FFFFB3','#8DD3C7', '#80B1D3'],

    pieSliceText: 'value',
    sliceVisibilityThreshold :0,

    fontSize: 12,
    legend: {
      position: 'labeled'
    },
  };

On Thursday, 9 January 2020 14:07:17 UTC, Praveen Kumar wrote:

[Praveen Kumar]

Hi Steven,

I have tried the legend.position='labeled'  but the output is not satisfactory , for the slice which has less value is not showing up label.Could you please suggest if there is an possibility  as per the attachment i shared ?

Thanks 

Praveen

[Steven Lovell]

Hi Praveen,

All I can suggest is to change the order of you data slightly (if possible). The chart will only render the labels if there is enough space to do so. Decreasing the font size may also help.

Regards,

Steve.

On Thursday, 9 January 2020 14:07:17 UTC, Praveen Kumar wrote: