CODEWITHSUNDEEP
chartsgoogle-visualizationvisualization
Muhammad Hasham
Muhammad Hasham

Reputation: 219

Change the Fill and Stroke color of an area chart?

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,

Upvotes: 9

Views: 8849

Answers (1)

asgallant
asgallant

Reputation: 26340

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.

Upvotes: 13

Related Questions