Google Visualization API font color

Question

I created a simple ColumnChart. Is there a way to change the font color globally (through options)?

I would like to change the color of the X and Y axis text. I was able to change the font, the background color, etc. but not the font color.

This is what I have so far:

var options = {
    backgroundColor: '#f1f1f1',
    fontName: 'Segoe UI'
};

chart.draw(data, options);

Thanks in advance.

Answer 1

There's no solution within the google charts API that I know of. I use a workaround in JQuery that I run after the chart is rendered:

$.each($("text"),function(index, value) {
    $(this).attr("fill","#ffffff");
    $(this).attr("font-family","cursive");
})

If you need to globally change the background of all charts on the page, you can use:

$.each($("rect"),function(index, value) {
    console.log(this);
    if($(this).attr("fill") == "#ffffff")
        $(this).attr("fill","#000000");
})

This works by finding any white rectangle and changing it's fill attribute to black.

You may need to tweak these to make sure they only impact your chart and not other elements of the page.

Answer 2

There is no global font style option. You have to set the styles on each element separately:

chart.draw(data, {
    titleTextStyle: {
        color: 'red'
    },
    hAxis: {
        textStyle: {
            color: 'red'
        },
        titleTextStyle: {
            color: 'red'
        }
    },
    vAxis: {
        textStyle: {
            color: 'red'
        },
        titleTextStyle: {
            color: 'red'
        }
    },
    legend: {
        textStyle: {
            color: 'red'
        }
    }
});

If you wish to, you can make a feature request to add support for a global font style.