CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Felipe Carreón
Felipe Carreón

Reputation: 53

Apply same color for all regions Google Geo Chart

Is there a way to apply the same color(without fade) for all the regions in a google geochart?

I triedremoving the "Range bar" for the map probably works but doesn't work.

  google.charts.load('upcoming', {
  callback: drawRegionsMap,
  packages: ['geochart']
});

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

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, {
    legend: 'none'
  });
}

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

Thanks

Upvotes: 1

Views: 475

Answers (2)

WhiteHat
WhiteHat

Reputation: 61222

according to the data format,
the second column in the data table drives the color of the region.

An optional numeric column used to assign a color to this region, based on the scale specified in the colorAxis.colors property. If this column is not present, all regions will be the same color.

as such, you can either remove the second column or use the same value for all rows.

however, if you would like the tooltip when hovering each region to display a different value,
we can use object notation for the values in the second column.

object notation allows us to provide the value (v:) and the formatted value (f:)
the tooltip displays the formatted value by default.

so to have all regions show the same color,
and also display the correct value in the tooltip,
we assign all the rows the same value,
but provide the actual value as the formatted value.

{v: 400, f: '200'}

see following working snippet...

google.charts.load('upcoming', {
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY',
  packages: ['geochart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', {v: 400, f: '400'}],
    ['United States', {v: 400, f: '200'}],
    ['Brazil', {v: 400, f: '200'}],
    ['Canada', {v: 400, f: '200'}],
    ['France', {v: 400, f: '200'}],
    ['RU', {v: 400, f: '200'}]
  ]);

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

Upvotes: 2

Mackija
Mackija

Reputation: 317

It looks like the colour is based on the provided value. If you're looking to change the background colour, try setting the backgroundColor property

Info here: https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring-your-chart

Upvotes: 0

Related Questions