Google Charts Tools - How to change label colors

Question

Google Charts Tools - How to change label colors

Navigation

#1 by (3 votes)

1

I've assembled a line chart using Google Chart Tools. But I can not change the colors of the labels. Look at this chart:

link

How would I change the colors of those values S1, S2, S3 (below the graph) and the numerical scales on the left side. Thank you.

google-charts

asked by anonymous 17.07.2014 / 20:18

1 answer

Excel Conditional Formatting How to prevent loading of GIF images and only authorize it when clicking a button? [duplicate]

score 3 · Answer 1

Since you've only posted one image of the chart, I'll be taking the Google Charts Playground example code having only the values of the horizontal axis similar to the one proposed (S1, S2 ...).

To achieve what you want, you must set the textStyle property of vAxis and hAxis . According to documentation we have something like this:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Piston 1', 'Piston 2'],
    ['S1',   1,       1],
    ['S2',   2,       0.5],
    ['S3',   4,       1],
    ['S4',   8,       0.5],
    ['S5',   7,       1],
    ['S6',   7,       0.5],
    ['S7',   8,       1],
    ['S8',   4,       0.5],
    ['S9',   2,       1],
    ['S10',   3.5,     0.5],
  ]);

  // Create and draw the visualization.

  new google.visualization.LineChart(

      document.getElementById('visualization'))
              .draw(
                  data,
                  {
                      width: 500, height: 400,
                      hAxis: {textStyle: { color: 'red'}},
                      vAxis: {textStyle: { color: 'blue'}}

                  }
  );
}

This example will make the vertical numbers blue and the horizontal ones red.

For some reason that I do not know, at least in the Playground the horizontal labels are not aligned.