How to create color gradient on Google Visualization Line Chart

Question

I am creating a Google line chart as per Google Line Chart Documentation.

I want to style the colour of the line such that it is a gradient between two colours, say between Green and Red. The weighting of each colour should be controlled by the 'y' value of the line.

i.e. at the point where the line's 'y' value is 0, the line will be completely green, At the highest 'y' value on the it should be completely red. In between values should have a weighting depending on the value of y at that point.

Is this possible? If so, how?

Answer 1

Since Google Line Chart is SVG based, you could customize how the line can change from one color to another via linearGradient element.

The below example shows how to inject [linearGradient element] into the chart (google.visualization.LineChart):

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');

    data.addRows([
      [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
      [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
      [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
      [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
      [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
      [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
      [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
      [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
      [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
      [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
      [60, 64], [61, 60], [62, 65], [63, 60], [64, 50], [65, 45],
      [66, 40], [67, 42], [68, 35], [69, 30]
    ]);

    var options = {
        hAxis: {
            title: 'Time'
        },
        vAxis: {
            title: 'Popularity'
        },
        backgroundColor: '#f1f8e9'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        addChartGradient(chart);
    });
    chart.draw(data, options);
}

function addChartGradient(chart) {
    var chartDiv = chart.getContainer();
    var svg = chartDiv.getElementsByTagName('svg')[0];
    var properties = {
        id: "chartGradient",
        x1: "0%",
        y1: "0%",
        x2: "0%",
        y2: "100%",
        stops: [
            { offset: '5%', 'stop-color': '#f60' },
            { offset: '95%', 'stop-color': '#ff6' }
        ]
    };
    

    createGradient(svg, properties);
    var chartPath = svg.getElementsByTagName('path')[1];  //0 path corresponds to legend path
    chartPath.setAttribute('stroke', 'url(#chartGradient)');
}


function createGradient(svg, properties) {
    var svgNS = svg.namespaceURI;
    var grad = document.createElementNS(svgNS, 'linearGradient');
    grad.setAttribute('id', properties.id);
    ["x1","y1","x2","y2"].forEach(function(name) {
        if (properties.hasOwnProperty(name)) {
            grad.setAttribute(name, properties[name]);
        }
    });
    for (var i = 0; i < properties.stops.length; i++) {
        var attrs = properties.stops[i];
        var stop = document.createElementNS(svgNS, 'stop');
        for (var attr in attrs) {
            if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
        }
        grad.appendChild(stop);
    }

    var defs = svg.querySelector('defs') ||
        svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
    return defs.appendChild(grad);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

JSFiddle