Google chart set stroke-width of line chart to null

Question

I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:

And make it look like the chart below:

What I have is a stacked area chart, so the options were set as follows:

 var options = {
    'title': '',
    isStacked: true,
    legend: {
        textStyle: { fontSize: '16' },
        position: 'top'
    },
    hAxis: {
        title: '',
        gridlines: {
            color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis 
        },
        textStyle: {
            fontName: 'Arial',
            fontSize: '18'
        }
        //ticks: [0, 100, 200, 75, 100] // display labels every 25
    },
    vAxis: {
        title: '',
        gridlines: {
            color: '#D3D3D3',
            count: 10,
            //lineDashStyle: [2,2]
        },
        textStyle: {
            fontName: 'Arial',
            fontSize: '18'
        },
        viewWindow: { max: range_max, min: range_min } //TODO: make them generable
        //showTextEvery: 100
    },
    'width':  1100, //100% //TODO: make this relative
    'height': 600,
    crosshair:
    {
        trigger: 'both'
    },
    series:
    {
        0: { pointSize: 8 },
        3: { lineDashStyle: [5, 1, 3] },
        4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
        5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
    },
    intervals: { 'style': 'line' },
    colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}

But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?

Answer 1

using a style column, you customize each series individually

it works the same for all the Column Roles, (annotation, style, etc...)

the role is applied to which ever series column it follows

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],

      // add same style for each point, series 1 only
      ['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
      ['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
      ['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
      ['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
    ]);

    var options = {
      isStacked: true,
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      series:
      {
        0: { id: 'ss223', type: 'area', color: 'transparent' },
        1: { type: 'area', color: 'black' },
        2: { type: 'line', color: 'red' },
        3: { type: 'line', color: 'blue' }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['corechart']
});

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

EDIT

problem with the above example, the legend is now out of sync with the series style

use the chart's 'ready' event to correct the legend entry,
the black line will be a path element

depending on the styles used, the logic may need to be adjusted, but works here

the elements found in the container will be in the same order as the data

see following working snippet to correct legend entry...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],

      // add same style for each point, series 1 only
      ['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
      ['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
      ['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
      ['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
    ]);

    var options = {
      isStacked: true,
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      series:
      {
        0: { id: 'ss223', type: 'area', color: 'transparent' },
        1: { type: 'area', color: 'black' },
        2: { type: 'line', color: 'red' },
        3: { type: 'line', color: 'blue' }
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ComboChart(container);

    google.visualization.events.addListener(chart, 'ready', function () {
      Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
        if (path.getAttribute('stroke') === '#000000') {
          path.setAttribute('stroke', 'transparent');
        }
      });
    });

    chart.draw(data, options);
  },
  packages:['corechart']
});

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