Google Charts API

Configuration Options

Introduction

One thing I do not like about the API documentation is that every chart type in the Chart Type Gallery has sections named Configuration Options, Methods and Events. Unfortunately, but it is not very clear how these can or should be used and I keep forgetting how.

The problem for me was to understand the dot notation used in the documentation. For example, in the configuration options for column charts, in the section about the hAxis options it mentions hAxis, hAxis.textStyle, hAxis.title and so on.

At first I thought it meant that you can use something like:

var options = {
hAxis.title ="I did this chart",
};

But that doesn't work at all. What the dots mean is that the options should be written as JSON (JavaScript Object Notation)

Simple options such as height can be simply written as:

var options = {
height: 240,
};

Others, such as the hAxis options are little more complex and need to be put in curly brackets:

var options = {
hAxis {
   title ="I did this chart",
   textStyle { color: "red",
      fontName: "Arial",
      fontSize: 12,
      bold: true,
      italic: true }
}
};

Other options such as colors are arrays. Such as:

var options = {
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

Simple options can be added by using the options. notation, such as:

options.backgroundColor = 'lightblue';
options.title = 'I drew this graph';

If the ChartWrapper Class is being used then setOption(key, value) can be used.

This page created December 26, 2020, last modified April 24, 2022