1

I could find configuration name for everyting backgroundColor, colorAxis, datalessRegionColor etc. But I just want to change the green default color.

Example Code:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
 google.load('visualization', '1', {'packages': ['geochart']});
 google.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};
</script>
yoshi
  • 1,287
  • 3
  • 15
  • 28

2 Answers2

3

The geocharts documentation does provide the information for what you need to do. Colors are configurable in the var options of your chart. https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options

If you only want to change the default coloring all you have to do is specify the color you want in the colors: option.
For instance:

    var options = {
    //Put your color hex code here
    colors: ['#FF0000'] //eg. red
};

By default this will color your data from the lightest shade to the color specified for the range of values of the data (lowest to highest). In your code this would be from 200 to 700. You can however specify what colors you would like you data to range from.
For instance, if you wanted the data to be colored from green to blue you can simply specify 2 colors.

    var options = {
    //Put your colour hex code here
    colors: ['#00FF00','#0000FF']
};

You can do this for however many colors you like but generally if you are trying to demonstrate some kind of difference between countries, it is best to use just 2 colors to show progression in the data. See this Fiddle for an example.

You can play around with the colors more by any of the options you stated above such as colorAxis. The documentation explains these fairly well.

user3663720
  • 305
  • 2
  • 12
0

You are looking for the following:

options["defaultColor"] = '';

replace with your color of choice.

Bryan
  • 225
  • 1
  • 11