CODEWITHSUNDEEP
javascriptcsschartsgoogle-visualization
Allaroundtheworld123
Allaroundtheworld123

Reputation: 59

How to change Line Opacity in google charts?

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.

Upvotes: 3

Views: 2245

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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>

Upvotes: 2

Related Questions