Menu
I am relatively new to google charts, so please pardon my ignorance;
I am looking at the Area Chart, and I want to change the Fill and Stroke color. Here is the code...
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Target'],
['JAN', 85],
['FEB', 105],
['MAR', 65],
['APR', 45],
['MAY', 45],
['JUN', 15],
['JUL', 60]
]);
// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : '',
isStacked: true,
width: 600,
height: 400,
vAxis: {title: "Millions"},
hAxis: {title: "Month"}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
The other part of my question is, where can I find a complete reference for customizing google charts?
Thanks,
215
The fill and stroke color of each series in the AreaChart is determined by the series color. You can set the color of data series by setting the colors option (which takes an array of HTML color strings, assigned to data series in column order) or via the series.<series index>.color option (which takes an HTML color string:
colors: ['#f36daa', 'blue', '#3fc26b']
or:
series: {
0: {
// set options for the first data series
color: '#f36daa'
},
1: {
// set options for the second data series
color: 'red'
},
2: {
// set options for the third data series
color: '#3fc26b'
}
}
Chart options are (mostly) documented in the documentation for the specific chart (eg: AreaChart). Some features that span multiple charts are documented separately (eg: Intervals, Trendlines, Dashboards and Controls, Event Handlers, Animations). Data structures, data manipulation, formatting, and associated classes are documented in the API Reference.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
