Google Charts: How Do I Change The Percentage Label Color?
I'm using Google Charts to display pie charts. In my options variable, I have the legend set this: legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}} Now if y
Solution 1:
didn't see an option that will change the text style for the charts elements mentioned but the chart's svg can be modified manually
however, the chart will revert back to the default style, whenever there is activity, such as hovering a slice
as such, a MutationObserver
can be used to override the styles
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addRows([
['Moving to a new city', 25],
['Meeting new people', 12.5],
['Gaining independence', 62.5]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var observer = newMutationObserver(function () {
$.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
$(path).attr('stroke', '#ffffff');
});
$.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
$(label).attr('fill', '#ffffff');
});
});
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(data, {
backgroundColor: '#1f618d',
legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
});
},
packages: ['corechart']
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>
Solution 2:
change the css:
g g g text
{
fill: black;
}
Post a Comment for "Google Charts: How Do I Change The Percentage Label Color?"