Visualization: Pie Chart Legend Text color based on Value

Question

I'm using ng-google-chart (Google Chart Api Directive Module for AngularJS version 0.0.11) with Google Pie charts and I'm trying to display Legend Text in the same color as slices color.
Pie Chart View

Is there any way to place slices colors into the legend.textStyle option?

Pie Chart Options

 drvPie.options = {
    pieHole: 0.9,
    pieSliceText: 'value',
    pieSliceTextStyle: {
        'fontSize': '25'
    },

    slices: {
        0: { color: 'green' },
        1: { color: 'orange' },
        2: { color: 'red' }
    },
    height: '100%',
    chartArea: {'width': '100%', 'height': '70%'},
    legend: {
        "textStyle": {
            color: 'blue', 
            fontSize: 15
        },
        labeledValueText: 'value',
        "position": "labeled"

    }
};

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2015-10-12T09:10:37

Unfortunately it is not supported to specify a separate legend style per item, but you could consider the following solution that demonstrates how to customize legend labels:

google.setOnLoadCallback(drawChart);
function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task Status', 'Count'],
      ['At work', 22],
      ['Terminated', 3],
      ['Not working', 13]
    ]);

    var options = {
        pieHole: 0.9,
        pieSliceText: 'value',
        pieSliceTextStyle: {
            'fontSize': '25'
        },

        slices: {
            0: { color: 'green' },
            1: { color: 'orange' },
            2: { color: 'red' }
        },
        height: '100%',
        chartArea: { 'width': '100%', 'height': '70%' },
        legend: {
            "textStyle": {
                fontSize: 15
            },
            labeledValueText: 'value',
            "position": "labeled"

        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    google.visualization.events.addOneTimeListener(chart, 'ready', function(){
        configureLegendLabel(data,options);
    });
    google.visualization.events.addListener(chart, 'onmouseover', function (e) {
        configureLegendLabel(data,options);
    });
    google.visualization.events.addListener(chart, 'onmouseout', function (e) {
        configureLegendLabel(data,options);
    });
    chart.draw(data, options);
}


function configureLegendLabel(data,options)
{
    for(var key in options.slices){
       var labelText = data.getValue(parseInt(key),0);
       var label = $("text:contains('" + labelText +  "')");
       label.attr('fill',options.slices[key].color);       
    }
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

Visualization: Pie Chart Legend Text color based on Value

1 Answers