Geek Answers Handbook

Change data header color (Google Visualization)

I am trying to change the colors of a line graph (Google visualization). Thats working, but I can’t find how I need to change the color of the “Cats” text. enter image description here

How is it described 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 job, but why do I see - 5 mil, not even a number below 0?

enter image description here

My code is:

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

}

+4
source share
2 answers

Divide your question into two parts.

Customize your legend

For your first question, the API documentation does not give us direct access to the legend itself. I think the best way to solve your problem is to start by disabling 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 do this, you can create your own legend by interacting with the map itself:

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

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

Axis Sizing

To remove the horizontal axis value of -5 million, you can set vAxis.minValue to 0. Therefore, to put everything 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'} }, });
+6
source

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

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

More articles:


All Articles