Google Charts

Customizing Axes

Overview

Dimensions in the data are often displayed on axes, horizontal and vertical. Such is the case for: Area Chart, Bar Chart, Candlestick Chart, Column Chart, Combo Chart, Line Chart, Stepped Area Chart and Scatter Chart.

When you create a chart with axes you can customize some of their properties:

  • Discrete vs Continuous
  • Direction - You can customize the direction using the hAxis/vAxis.direction option.
  • Label positioning and style - You can customize label positioning and style using the hAxis/vAxis.textPosition and hAxis/vAxis.textStyle options.
  • Axis title text and style - You can customize the axis title text and style using the hAxis/vAxis.title and hAxis/vAxis.titleTextStyle options.
  • For a complete list of axis configuration options, look at the hAxis and vAxis options in the documentation for your specific chart.

Terminology

Major/minor axis:

  • The major axis is the axis along the natural orientation of the chart. For line, area, column, combo, stepped area and candlestick charts, this is the horizontal axis. For a bar chart it is the vertical one. Scatter and pie charts don't have a major axis.
  • The minor axis is the other axis.

Discrete/continuous axis:

  • A discrete axis has a finite number of evenly spaced values, called categories.
  • A continuous axis has an infinite number of possible values.

Discrete vs Continuous

The major axis of a chart can be either discrete or continuous. When using a discrete axis, the data points of each series are evenly spaced across the axis, according to their row index. When using a continuous axis, the data points are positioned according to their domain value.

The labeling is also different. In a discrete axis, the names of the categories (specified in the domain column of the data) are used as labels. In a continuous axis, the labels are auto-generated: the chart shows evenly spaced grid lines, where each grid line is labeled according to the value it represents.

The following axes are always continuous:

  • Both axes of scatter and bubble charts.
  • The minor axis.

The following axes are always discrete:

  • The major axis of stepped area charts (and combo charts containing such series).

In line, area, bar, column and candlestick charts (and combo charts containing only such series), you can control the type of the major axis:

  • For a discrete axis, set the data column type to string.
  • For a continuous axis, set the data column type to one of: number, date, datetime or timeofday.
Discrete / Continuous First column type Example
Discrete string
Continuous number
Continuous date

Help! My chart has gone wonky!

My domain axis type is not string but I still want a discrete domain axis:


and this upsets you, then you can do one of the following:
  1. Set the domainAxis.type option to 'category'.
  2. Change the type of your first data table column to string.
  3. Use a DataView as adapter to convert the type of your first data table column to string:
          var dataTable = new google.visualization.DataTable();
          dataTable.addColumn('number', 'Voltage (V)');
          dataTable.addColumn('number', 'Current (mA.)');
          dataTable.addRows([
            [new Date(2008, 0, 1), 1],
            [new Date(2008, 1, 14), 2],
            [new Date(2008, 9, 14), 12],
            [new Date(2008, 10, 14), 22],
            [new Date(2009, 1, 1), 30]
          ]);
    
          var dataView = new google.visualization.DataView(dataTable);
          dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1]);
    
          var chart = new google.visualization.LineChart(document.getElementById('containerID'));
          var options = {
            width: 400, height: 240,
            legend: 'none',
            pointSize: 5
          };
          chart.draw(dataView, options);
        


I do not want domain axis values:

  1. Insert a column of type string before your first data table column (new column will become first). Values of this column should be empty strings.
  2. Use a DataView as adapter to insert an empty strings column before your first data table column:
          var dataTable = new google.visualization.DataTable();
          dataTable.addColumn('number', 'Voltage (V)');
          dataTable.addColumn('number', 'Current (mA.)');
          dataTable.addRows([
            [-180, -300],
            [-170, -50],
            [-70, -30],
            [150, 64],
            [160, 256]
          ]);
    
          var dataView = new google.visualization.DataView(dataTable);
          dataView.setColumns([{calc: function(data, row) { return ''; }, type:'string'}, 0, 1]);
    
          var chart = new google.visualization.LineChart(document.getElementById('containerID'));
          var options = {
            width: 400, height: 240,
            legend: 'none',
            pointSize: 5
          };
          chart.draw(dataView, options);
        

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.