Changing font color in chart

Question

I have been trying for three hours now with the Google Charts API to change the color of the next that I have displayed below. As you can see I've gotten the X/Y axis drawing in White, but That's about all I could do albeit changing the background color.

enter image description here

I've been reading the documentation located here: https://developers.google.com/chart/interactive/docs/gallery/table

Refer http://stackoverflow.com/questions/15185308/how-to-change-color-of-annotation-text-in-google-charts — Jatin, May 28 '14 at 23:29
`The best you can do is to change the style of the line, but it doesn't look like you can currently change the color of the line.` -- One year ago, also that table doesn't even load. — Christian Tucker, May 28 '14 at 23:34
That answer refers to annotation text color, not chart title, axis labels, and legend labels text color. — asgallant, May 29 '14 at 01:16

score 6 · Accepted Answer · answered May 29 '14 at 01:22

6

Many labels in the chart have associated textStyle options. In your case, you want to use hAxis.textStyle, vAxis.textStyle, legend.textStyle, and titleTextStyle:

hAxis: {
    textStyle: {
        color: '#ffffff'
    }
},
vAxis: {
    textStyle: {
        color: '#ffffff'
    }
},
legend: {
    textStyle: {
        color: '#ffffff'
    }
},
titleTextStyle: {
    color: '#ffffff'
}

answered May 29 '14 at 01:22

asgallant

26,060
6
72
87

I mean, if there was a way to give you every drop of my small amount of reputation right now, I would give it to you. I've spent a total of around 12 hours trying to figure this out. – Christian Tucker May 29 '14 at 02:12

score 1 · Answer 2 · answered May 28 '14 at 23:39

1

legend.textStyle and tooltip.textStyle control this as documented for scatter charts for instance here

answered May 28 '14 at 23:39

Jatin

3,065
6
28
42

perhaps I'm doing this incorrectly, but it completely breaks the chart. in var options `legend.textStyle: { color: 'white', fontSize: '12', bold: 'true', italic: 'true' }` – Christian Tucker May 28 '14 at 23:59
Also, this only changes the text on the right-hand side, what about the others? and the title? Perhaps that's what the tooltip does, but last I checked the tooltip was the popup? – Christian Tucker May 29 '14 at 00:03
Got it working and verified, I still need to know how to change the actual marker information. – Christian Tucker May 29 '14 at 00:08
Cool:) Glad that helped. And about the marker I will have a look at let you know. – Jatin May 29 '14 at 00:11

score 0 · Answer 3 · answered Jun 15 '14 at 14:14

I think, I have understood the main properties of Google Charts. Here they are:

// options
var options = {
// title
title: 'What is your favourite season?',
titleTextStyle: {color: '#006633'},
// horizontal axis
hAxis: { 
textStyle: {
color: '#ffffff',
fontName: 'Tahoma',
fontSize: 12},
slantedText: false,
minTextSpacing: 1,
},
// vertical axis
vAxis: { 
textStyle: {
color: '#ffffff',
fontName: 'Tahoma',
fontSize: 12},
slantedText: false,
minTextSpacing: 1,
},
// legend
legend: {
textStyle: {
color: '#c7d781',
fontSize:14,
bold:true,
italic:false
}
},
// tooltip
tooltip: {
textStyle: {
color: '#ff0000',
fontSize:14,
bold:true,
italic:false
}
},
// chart
width:740,
height:200,
backgroundColor: 'transparent',
baselineColor: 'white'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartContainer-03'));
chart.draw(data, options);
}

Source code and demo here

Changing font color in chart

3 Answers3