CODEWITHSUNDEEP
google-visualization
Priya
Priya

Reputation: 1481

Is it possible to show each legend in different color in google pie chart

Is it possible to show each legend in different color in google pie chart? I have 3 legends in my pie chart and i want to show each one of them in different color.

Upvotes: 0

Views: 2165

Answers (1)

Max
Max

Reputation: 454

Yes, from google instructions:

use the legend.textStyle option and assign it like so

Object  {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

so for each pi chart in the drawchart 

function drawChart() {//chart 1
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 1',
      pieSliceText: 'label',
      legend.textStyle: { color: 'blue',  fontName: 'arial'}
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
    chart.draw(data, options);
  }
function drawChart() {//chart 2
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 2',
      pieSliceText: 'label',
      legend.textStyle: { color: 'red', fontName: 'arial'}
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
    chart.draw(data, options);
  }    function drawChart() {//chart 3
    var data = google.visualization.arrayToDataTable([
      ['Language', 'Speakers (in millions)'],
      ['dataname1', 13], ['dataname2', 83],
    ]);

    var options = {
      title: 'chart 3',
      pieSliceText: 'label',
      legend.textStyle: { color: 'green',  fontName: 'arial'}
      },
    };

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

Upvotes: 1

Related Questions