CODEWITHSUNDEEP
javascriptgoogle-visualizationgeomap
MaDHaN MinHo
MaDHaN MinHo

Reputation: 529

How to change Default color in google charts geomap?

I want to change the default yellow color of chart region to user defined color. I can able to change only marker color. I used this code to generate chart data.

         dataTable = new google.visualization.DataTable();
         dataTable.addRows(4);
         dataTable.addColumn('number', 'LATITUDE', 'Latitude');
         dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
         dataTable.addColumn('number', 'Ticket', 'Value'); 
         dataTable.addColumn('string', 'HOVER', 'HoverText');

         dataTable.setValue(0,0,12.9715987);
         dataTable.setValue(0,1,77.5945627);
         dataTable.setValue(0,2,43);
         dataTable.setValue(0,3,"Banglore");

         dataTable.setValue(1,0,22.642664);
         dataTable.setValue(1,1,88.439122);
         dataTable.setValue(1,2,66);
         dataTable.setValue(1,3,"Kolkatta");

         dataTable.setValue(2,0,13.0826802);
         dataTable.setValue(2,1,80.2707184);
         dataTable.setValue(2,2,54);
         dataTable.setValue(2,3,"Chennai");

         dataTable.setValue(3,0,9.9252007);
         dataTable.setValue(3,1,78.1197754);
         dataTable.setValue(3,2,64);
         dataTable.setValue(3,3,"Madurai");

enter image description here

How to change the region, background and tooltip color? please help me

Upvotes: 2

Views: 3144

Answers (2)

Hitesh Subnani
Hitesh Subnani

Reputation: 593

Hey this worked for me

colors: ['#0077CC']

You can add this in Options Like :-

var options = {
    region: 'IN',
    displayMode: 'markers',
    colorAxis: {colors: ['blue']}
  };

For more information you can visit Link

Upvotes: 0

Liam
Liam

Reputation: 29714

There is a a ticket on github for this

Basically the code below set's the options your need

var options = {};
  options['region'] = 'US';
  options['resolution'] = 'provinces';
  options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']};
  options['backgroundColor'] = '#FFFFFF';
  options['datalessRegionColor'] = '#E5E5E5';
  options['width'] = 556;
  options['height'] = 347;
  options['legend'] = 'none';

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(geoData, options);

this is also covered in the official docs

backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.

Type: string or object Default: white

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string Default: white

backgroundColor.stroke

The color of the chart border, as an HTML color string.

Type: string Default: '#666'

backgroundColor.strokeWidth

The border width, in pixels.

Type: number Default: 0

Upvotes: 0

Related Questions