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.

As what is it descriped here?

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 ?

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'} },
                }
        );

}

​

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.

As what is it descriped here? https://developers.google./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 ?

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'} },
                }
        );

}

​

• javascript
• colors
• google-visualization
• linechart

Share Follow edited Jan 15, 2013 at 16:07 Sharpless512 asked Jan 15, 2013 at 16:00 Sharpless512Sharpless512 3,24266 gold badges4040 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 pleted 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'} },
});

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

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