How to change Line Opacity in google charts?

Question

I am using Google Charts and I am able to change the colour of a line half way through a graph conditionally using a dataView , as shown in code below:

var dataView = new google.visualization.DataView(data);

dataView.setColumns([
    // reference existing columns by index
    0, 1,
    // add function for line color
    {
        calc: function (data, row) {
            var colorDown = '#ff9900';
            var colorUp = '#27B291';
            var opacity  = 'opacity, 0.2;'
            var currentdate = new Date();
            var givendate = new Date(row.getValue)

            if (data.getValue(row, 0) > currentdate) {
                return colorDown;
            } else {
                return colorUp;
            }
        },
        type: 'string',
        role: 'style'
    }
]);

I was wondering if there is way I can also change the line opacity conditionally as I can't seem to find a way to do it and other methods I have tried do not seem to work? Thanks.

Answer 1

using the style column role, you can combine color and opacity as follows...

'color: #ff9900;opacity: 0.2;'

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.arrayToDataTable([ ['x', 'y'], [new Date(2018, 6, 15), 2924], [new Date(2018, 6, 16), 2381], [new Date(2018, 6, 17), 2489], [new Date(2018, 6, 18), 2235], [new Date(2018, 6, 19), 2155], [new Date(2018, 6, 20), 2844], ]); var container = document.getElementById('chart_div'); var chart = new google.visualization.LineChart(container); var dataView = new google.visualization.DataView(data); dataView.setColumns([ // reference existing columns by index 0, 1, // add function for line color { calc: function (data, row) { var colorDown = 'color: #ff9900;'; var colorUp = 'color: #27B291;'; var opacity = 'opacity: 0.2;' var currentdate = new Date(); var givendate = new Date(row.getValue) if (data.getValue(row, 0) > currentdate) { return colorDown + opacity; } else { return colorUp + opacity; } }, type: 'string', role: 'style' } ]); chart.draw(dataView, { legend: { position: 'none' } }); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>