How to Customize Charts

You can use Google Chart Tools with their default setting - all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel. These options are expressed as name:value pairs in the options object passed into a chart's draw() method.

Charts usually support custom options appropriate to that visualization. For example, the table chart supports a sortColumn option to specify the default sorting column, and the pie chart visualization supports a colors option that lets you specify slice colors. Each chart's documentation should describe the options that it supports.

You will pass your options in as an optional second parameter to the chart's draw() method described previously. You specify options by creating an object with properties specific to each chart.

The following example demonstrates creating an options object that specifies all of these properties:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

Here's the chart that this code creates.

You can also specify options literally within the draw() method:

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

Here's the chart that this code creates.

More Information