CODEWITHSUNDEEP
google-visualization
SliderUK
SliderUK

Reputation: 167

Change Color of Stacked Grouped Google Column Chart

Please look at http://jsfiddle.net/v1u1afzn/228/

google.load('visualization', '1.1', {
  'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      0: {
      },
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
    colors: ['blue', 'red'],
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
};

How do I change the faded / lighter blue (first column top stack) to say yellow?

I cannot find a way to change color of individual series that is grouped.

Any ideas?

Thanks in advance.

Upvotes: 3

Views: 1171

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

use the series option to change the color of an individual series / column / stack 

series: {
  0: {
    color: 'yellow'
  },
  1: {
    color: 'green'
  },
  2: {
    color: 'blue',
    targetAxisIndex: 1
  },
  3: {
    color: 'red',
    targetAxisIndex: 1
  }
}

see following working snippet... 

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      0: {
        color: 'yellow'
      },
      1: {
        color: 'green'
      },
      2: {
        color: 'blue',
        targetAxisIndex: 1
      },
      3: {
        color: 'red',
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: jsapi should no longer be used to load the charts library,
according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

this will only change the load statement, see above snippet...

Upvotes: 2

Related Questions