change color of data title (Google Visualization)

Question

I'm trying to change the colors of a line graph (Google visualization). Thats works but I can't find how I need to change the color of the "Cats" text. enter image description here

As what is it descriped here? https://developers.google.com/chart/interactive/docs/gallery/linechart

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}

Another question This is my current work, but why do I see - 5 mil even there is no number below 0 ?

enter image description here

My code:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
                curveType: "function",
                width: 900, height: 300,
                vAxis: {minValue:0},
                colors: ['#769dbb'], //Line color
                backgroundColor: '#1b1b1b',
                hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
                vAxis: { textStyle: {color: '#767676'} },
                }
        );

}

score 6 · Accepted Answer · edited May 23 '17 at 11:59

6

Let's break up your question into two parts.

Customizing Your Legend

For your first question, the API documentation doesn't really give us direct access to the legend itself. I think the best way to solve your problem would be to start by turning off the default legend:

var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
    legend: { position: "none" }, // turn off the legend
    curveType: "function",
    width: 900, height: 300,
    vAxis: {minValue:0},
    colors: ['#769dbb'], //Line color
    backgroundColor: '#1b1b1b',
    hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
    vAxis: { textStyle: {color: '#767676'} },
});

Once you have completed this, you can create your own legend by interacting with the map itself:

google.visualization.events.addListener(chart, 'ready', drawCustomLegend);

Check out the documentation on handling chart events, as well as this question.

Configuring Axis Dimensions

To remove the -5 million horizontal axis value, you can set your vAxis.minValue to 0. So to put it all together:

var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
    legend: { position: "none" }, // turn off the legend
    curveType: "function",
    width: 900, height: 300,
    vAxis: {minValue:0},
    colors: ['#769dbb'], //Line color
    backgroundColor: '#1b1b1b',
    hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
    vAxis: { minValue: 0, textStyle: {color: '#767676'} },
});

edited May 23 '17 at 11:59

Community

1
1

answered Jan 15 '13 at 16:24

Kyle

4,202
1
33
41

awesome thanks, Because you said its called legend, I searched and found. `legend.textStyle` – Sharpless512 Jan 15 '13 at 16:28
Yes, the legend.textStyle is what you want if you want a uniform style for all elements in your legend. You'll need a custom legend for more fine-grained configuration. – Kyle Jan 15 '13 at 16:33
I have added `hAxis: { minValue: 0 }` , but I still see it – Sharpless512 Jan 15 '13 at 16:34
My bad. Change move your minValue to `vAxis`. Editing my answer. – Kyle Jan 15 '13 at 16:38
hmmm. The docs do mention that `minValue` will actually be the minimum of "the minValue option value, or the lowest data value, rounded down to the next lower grid mark." Is your lowest graph value < 0? – Kyle Jan 15 '13 at 16:49
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22769/discussion-between-kyle-and-sharpless512) – Kyle Jan 15 '13 at 17:08
The vAxis should be able to be set as zero if there are no data values below it. If you change one of the data points to -1, you can use the following options: ` vAxis: { maxValue: 10, viewWindowMode: 'explicit', viewWindow: { min: 0, } }` this will set your axis to be a minimum of zero. – jmac Jan 16 '13 at 05:40

score 0 · Answer 2 · answered Apr 23 '16 at 16:30

This worked for me. Check out the "legend" property below.

options='{"title": "Abandoned Carts",
              "backgroundColor" : "transparent",
              "pieHole": "0.4",
              "legend" : { "textStyle" : { "color" : "white"} }
              }'

change color of data title (Google Visualization)

2 Answers2