Google Charts Tools - How to change colors of labels

Asked

Viewed 1,861 times

1

I set up a line chart using Google Chart Tools. But I can’t change the colors of the labels. Look at this chart:

http://assets.chris-saylor.com/img/g_chart_example1.png

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

1 answer

3

Since you only posted an image of the graphic I will be taking into account the example code of Google Charts Playground having only the horizontal axis values similar to the one proposed (S1, S2...).

To achieve what you want you must set the property textstyle of vAxis and the hAxis. According to the 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 I do not know, at least in the Playground the horizontal labels are not aligned.

  • I had already found examples of this type in google, but in the example I found, the word Textstyle was written with a capital T and so it didn’t work. But now problem solved. Grateful.

  • 1

    Glad I could help. Don’t forget to at least mark the answer as resolved. Your question today may be someone else’s tomorrow. ;)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.