Develop Reference

Removing all grid lines in Google Charts API

I am using the Google Charts API to create a stepped area chart and I'd like to remove all horizontal lines in my chart. I've looked at all the documentation for the options, but I don't see any way to remove it. Is there some way to trick the API into removing them or am I stuck with them? The lines I am talking about is in the picture below, just to clear possible confusion.

Set vAxis.gridlines.color to transparent. You see more options in the Configuration Options section from the docs.
Use (using example from docs):
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
gridlines: {
color: 'transparent'
}
},
isStacked: true
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 500px; height: 250px;"></div>

you can use the following option...
vAxis: {
gridlines: {
count: 0
}
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
isStacked: true,
vAxis: {
gridlines: {
count: 0
}
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts backgroundColor not working with example code

I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart

You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.

How to remove number and percentage from tooltip in google chart?

I am trying to change tooltip value in google chart. I want to show only text field inside tooltip in my chart. But when I mouse hover on my chart it shows number and percentage. More clearly, (From image) I want to show only "Sleep" not the "7(29.2%)".Please share with me if any one have any idea.
My Jsfiddle link: http://jsfiddle.net/1c3atn9z/1/
My codes are below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Image:

No standard way to do it, you can only choose slice text. You could do a workaround this way though:
var options = {
title: 'My Daily Activities',
is3D: true,
tooltip: { isHtml: true }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'onmouseover', function(hover){
if(hover){
$('.google-visualization-tooltip-item:eq(1)').remove() // remove the other info
}
})
chart.draw(data, options);
Be sure to add the tooltip: { isHtml: true } for it to work
Here is working fiddle: http://jsfiddle.net/juvian/1c3atn9z/2/

How to create bar chart with background images

Hi I want to create bar chart like image which i have posted, I was trying to do this using google api and d3.js but unable to achieve. I need a light background for bar after bar end to a fix height for each bar.please tell me which API i should use.
I have used google api
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Ingredients', 'Quantity', { role: 'style' }, { role: 'annotation' }],
['28g', 28, 'red', 'Fat'],
['14g', 14,'red','Saturates'],
['9g', 9,'red','Sugar'],
['2.2g', 2.2,'red','Salt']
]);
var options = {
'legend': 'none',
'title': 'per Product',
'titleTextStyle': {color: '#FF0000'},
'hAxis': {title: 'in grams', titleTextStyle: {color: 'red'}},
tooltip: {trigger: 'none'},
enableInteractivity: 'False'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
using this I got below

to achieve that you can just plot another rectangle before the one you use to show the actual data, with the width as each bar and the height as the max value of the scale

In the API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Methods
You have many options on backgroundColor.

Google Chart Bar Blue to White

I' am using Google Chart. I was searching on Google and found some API options to set in to get the color of the bar from default blue to white. This is what I have added into the option parameters:
Someone said that this will only work if you want more then one color of bars
colors: '#FFF'
This is also what I tried. Saw this somewhere so thought to apply it.
color: '#FFF'
For some reason its not working as wanted. Here's my javascript code in placed.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Current Demand'],
<?php echo $data; ?>
]);
var options = {
width: 350,
height: 261,
isStacked: true,
legend: 'none',
backgroundColor: {
fill:'transparent'
},
hAxis: {
title: '',
titleTextStyle: {color: 'white'
},
colors: '#FFF'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Am I missing something?

Colors need to be put into a javascript array.
colors: ['#fff']