Customizing Colors in Google Charts

Google Charts provide a wide variety of options for data visualization, from simple line charts to complex hierarchical tree maps. One of the key aspects of visual representation is color usage. Customizing the color scheme of your chart not only enhances its aesthetic appeal but can also be used strategically to aid in data interpretation or adhere to branding guidelines.

Getting Started with Google Charts

Before we delve into changing color schemes, it's essential to understand how to set up Google Charts. Below is a basic example of how to load the Google Charts loader and draw a simple pie chart:

Changing Colors

To change the color of any chart in Google Charts, you will usually use the colors option in the chart's options object. This parameter accepts an array of colors in either hexadecimal format or as HTML color names. Below, we'll explore how to change colors in different types of charts.

Pie Chart

Let's start by changing the color scheme of a basic pie chart. Below is how you can specify a custom color set.

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      colors: ['#e0440e', '#e6693e', '#f3b49f', '#f6c7b6', '#b6d7a8']
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
</script>

Column Chart

Changing the color in a column chart follows a similar process. In the example below, we set custom colors for each column in our chart.

<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Galaxy', 'Distance', 'Brightness'],
      ['Canis Major Dwarf', 8000, 23.3],
      ['Sagittarius Dwarf', 24000, 4.5],
      ['Ursa Major II Dwarf', 30000, 14.3],
      ['Lg. Magellanic Cloud', 50000, 0.9],
      ['Bootes I', 60000, 13.1]
    ]);

    var options = {
      title: 'Galactic Statistics',
      chart: { title: 'Galaxy Distance vs Brightness' },
      bars: 'horizontal', // Required for Material Bar Charts.
      colors: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e']
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>

Final Thoughts