CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Sambas23
Sambas23

Reputation: 703

Google Chart access fill property of path

I am trying to access fill property of a series in a stacked area (Google charts). I want the bottom series of the stacked chart to become transparent as shown in the JSFiddle code.

Can one please assist in this please? Your help is very much appreciated.

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
    <!-- Div that will hold the pie chart-->
    <div id="chart_div"></div>

</div>

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

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

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

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

Upvotes: 1

Views: 288

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

just replace...
backgroundColor: { fill: 'transparent' }

with...
color: 'transparent'

the series will be numbered, starting with zero on the bottom

see following working snippet...

note: if you want to make the area solid black, not just the border,
add this to your options...
areaOpacity: 1

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Line 1', 'Line 2'],
      ['2013', 1000, 400, 200, 400],
      ['2014', 1170, 460, 200, 400],
      ['2015', 660, 1120, 200, 400],
      ['2016', 1030, 540, 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>

Upvotes: 1

Related Questions