- Home
- JavaScript
- Transparent Backgrounds & White Text in Google Charts · Google Charts for Dark Theme
Transparent Backgrounds & White Text in Google Charts · Google Charts for Dark Theme
By The Problem: Google Charts Don’t Look Great In Dark Themes By Default
Google charts default black text on white background looks decent if your page happens to be light but the default does not well suit a dark theme.
The Solution: Chart Options That Always Look Great
To use a transparent background for your google chart add the following to your options:
backgroundColor: { fill:'transparent' }
How We Do It: Our JavaScript Code
When the page background is dark, you’ll often want to use white for your font color. Use the following options to your google chart:
var chartTextStyle = {};
if(isDarkMode) {
chartTextStyle = {color: '#FFF'};
}
///... add these to your chart options
vAxis: {
title: 'US Dollars',
textStyle:chartTextStyle,
titleTextStyle:chartTextStyle,
gridlines: {color: '#787878'}
},
hAxis: {
textStyle:chartTextStyle,
titleTextStyle:chartTextStyle
},
legend:{
textStyle:chartTextStyle
}