Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google charts - change axis text color

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>
like image 528
LcSalazar Avatar asked Oct 16 '14 13:10

LcSalazar


People also ask

How do you change the color of a line in a Google graph?

You can change the color of the lines that connect data points in Google Charts in two subtly different ways: with the colors option to change the chart palette, or with the series option to specify the color for particular series. In the following chart, we set the color of each series explicitly.

What is continuous axis?

An imaginary line running around the ice surface that serves as a basis for a dance pattern . Usually the continuous axis consists of two lines running parallel to the long axis of the ice surface, approximately halfway between the long axis and the perimeter of the rink.

How do I hide the legend in my Google chart?

The Legend is hidden by setting the legend property to none in the Google Chart Options. title: 'USA City Distribution', legend: 'none' // Hides the Legend.


1 Answers

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

like image 133
juvian Avatar answered Sep 18 '22 21:09

juvian