Google charts - change axis text color

Question

I'm trying to create a black chart with Google Charts, but I can't seem to change the text color of the axis. I tried some code pieces I found on the web, like:

hAxis: {
  color: '#FFF'
}

But it just doesn't work. I've managed to change the title and legend color, but not the axis text. I'm trying to set the axis text color to white, to contrast with the backgroud:

google.load("visualization", "1", { packages: ["corechart"] });
setTimeout(function() {
  var options = {
    title: 'Test Chart',
    backgroundColor: '#000',
    legendTextStyle: { color: '#FFF' },
    titleTextStyle: { color: '#FFF' },
    hAxis: {
      color: '#FFF',
    }
  };
  var chart = new google.visualization.LineChart(document.querySelector(".chart"));
  chart.draw(google.visualization.arrayToDataTable(
    
    [
      ["Year", "T1", "T2", "T3"],
      [0, 10, 20, 30],
      [1, 10, 20, 30],
      [2, 10, 20, 30],
      [3, 10, 20, 30],
      [4, 10, 20, 30]
    ]
  
  ), options);
  
}, 100);

.chart {
  width: 100%;
  height: 200px;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart"></div>

My use case is a little different: in case of regular charts (uncofigured colors) the texts are grey instead of black, so their contrast is low. This means that I manually have to instruct and modify every piece to really be black? — Csaba Toth

juvian juvian · Accepted Answer · 2014-10-16T17:20:06

Correct usage for hAxis is using the textStyle options, in which you want the color:

hAxis: {
    textStyle:{color: '#FFF'}
}

I would also recommend using google.setOnLoadCallback(drawChart); function for rendering the chart instead of timeout, at least for me 100 milliseconds was not enough

Google charts - change axis text color

2 Answers