fill one color in google chart

Question

We are trying to fill only one color in google area chart, with different line color.

If we use

isStacked:true

then it will change chart representation
(change y-axis max coordinate)

we want to fill only one color
(green color below the max border in chart).

fiddle

Answer 1

Using a ComboChart and two sets of the same data, I believe I was able to achieve the desired result.

Note definitions for each series
The first two are identical using areaOpacity: 1 to prevent color mix
These are also not visibleInLegend

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
  var data1 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  1000,    400,        400,        1000  ],
    ['2014',  1170,    460,        460,        1170  ],
    ['2015',  660,     1120,       1120,       660   ],
    ['2016',  1030,    540,        540,        1030  ]
  ]);

  var data2 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  1000,    400,        400,        1000  ],
    ['2014',  1170,    460,        460,        1170  ],
    ['2015',   660,    400,        400,         660  ],
    ['2016',  1030,    540,        540,        1030  ]
  ]);

  var data3 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
    ['2013',  400,    1000,        1000,        400  ],
    ['2014',  460,    1170,        1170,        460  ],
    ['2015',  400,     660,         660,        400  ],
    ['2016',  540,    1030,        1030,        540  ]
  ]);
  
  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      }
    },
    vAxis: {
      minValue: 0
    },
    series: {
      0: {
        areaOpacity: 1,
        color: '#EF9A9A',
        type: 'area',
        visibleInLegend: false
      },
      1: {
        areaOpacity: 1,
        color: '#EF9A9A',
        type: 'area',
        visibleInLegend: false
      },
      2: {
        color: '#5C6BC0',
        lineWidth: 5,
        type: 'line'
      },
      3: {
        color: '#B71C1C',
        lineWidth: 5,
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data1, options);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
  chart.draw(data2, options);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div3'));
  chart.draw(data3, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>

Answer 2

You mean like this: https://jsfiddle.net/7uyz541m/1/ or this: https://jsfiddle.net/7uyz541m/2/ ?

You can set the areaOpacity to zero to remove the filling of a series. The difference between the first and second jsfiddle link is the isstacked value.

series: {
          0: {
              areaOpacity: 0
          }
        },

To make both areas the "same" color but the line a different color you need to add a dummy column like here: https://jsfiddle.net/7uyz541m/3