# Customizing Axes

1. [Overview](https://developers.google.com/chart/interactive/docs/customizing_axes#Overview)
2. [Terminology](https://developers.google.com/chart/interactive/docs/customizing_axes#Terminology)
3. [Discrete vs. Continuous](https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous)
4. [Axis Scale](https://developers.google.com/chart/interactive/docs/customizing_axes#Axis_Scale)
5. [Number Formats](https://developers.google.com/chart/interactive/docs/customizing_axes#Numbers)

## Overview

Dimensions in the data are often displayed on *axes* , horizontal and vertical. Such is the case for: [Area Chart](https://developers.google.com/chart/interactive/docs/gallery/areachart), [Bar Chart](https://developers.google.com/chart/interactive/docs/gallery/barchart), [Candlestick Chart](https://developers.google.com/chart/interactive/docs/gallery/candlestickchart), [Column Chart](https://developers.google.com/chart/interactive/docs/gallery/columnchart), [Combo Chart](https://developers.google.com/chart/interactive/docs/gallery/combochart), [Line Chart](https://developers.google.com/chart/interactive/docs/gallery/linechart), [Stepped Area Chart](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart) and [Scatter Chart](https://developers.google.com/chart/interactive/docs/gallery/scatterchart).

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

- [Discrete vs. Continuous](https://developers.google.com/chart/interactive/docs/customizing_axes#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.
- [Axis scale](https://developers.google.com/chart/interactive/docs/customizing_axes#Axis_Scale) - You can set the scale of an axis to logarithmic (log) scale using the hAxis/vAxis.logScale or hAxis/vAxis.scaleType options.
- For a complete list of axis configuration options, look at the hAxis and vAxis options in the documentation for your specific chart.

<br />

## 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 bubble charts.
- The minor axis.

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 |   |

## Axis Scale

You can set the scale of an axis using the `scaleType` option.
For example, to set the scale of the vertical axis to log scale, use the following option:

```
  vAxis: {
        scaleType: 'log'
  }
```

The following line chart shows the growth of the world population in both linear (standard) scale and log scale.

| Linear Scale | Log Scale |
|---|---|
|   |   |

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<table class="columns"\> \<tr\> \<th\>Linear Scale\</th\> \<th\>Log Scale\</th\> \</tr\> \<tr\> \<td\>\<div id="linear_div"\>\</div\>\</td\> \<td\>\<div id="log_div"\>\</div\>\</td\> \</tr\> \</table\> google.charts.load('current', {'packages':\['corechart', 'line'\]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Population'); data.addRows(\[ \[new Date(1400, 1, 1), 374\], \[new Date(1500, 1, 1), 460\], \[new Date(1600, 1, 1), 579\], \[new Date(1700, 1, 1), 679\], \[new Date(1750, 1, 1), 770\], \[new Date(1800, 1, 1), 954\], \[new Date(1850, 1, 1), 1241\], \[new Date(1900, 1, 1), 1633\], \[new Date(1910, 1, 1), 1750\], \[new Date(1920, 1, 1), 1860\], \[new Date(1930, 1, 1), 2070\], \[new Date(1940, 1, 1), 2300\], \[new Date(1950, 1, 1), 2558\], \[new Date(1951, 1, 1), 2595\], \[new Date(1952, 1, 1), 2637\], \[new Date(1953, 1, 1), 2682\], \[new Date(1954, 1, 1), 2730\], \[new Date(1955, 1, 1), 2782\], \[new Date(1956, 1, 1), 2835\], \[new Date(1957, 1, 1), 2891\], \[new Date(1958, 1, 1), 2948\], \[new Date(1959, 1, 1), 3001\], \[new Date(1960, 1, 1), 3043\], \[new Date(1961, 1, 1), 3084\], \[new Date(1962, 1, 1), 3140\], \[new Date(1963, 1, 1), 3210\], \[new Date(1964, 1, 1), 3281\], \[new Date(1965, 1, 1), 3350\], \[new Date(1966, 1, 1), 3421\], \[new Date(1967, 1, 1), 3490\], \[new Date(1968, 1, 1), 3562\], \[new Date(1969, 1, 1), 3637\], \[new Date(1970, 1, 1), 3713\], \[new Date(1971, 1, 1), 3790\], \[new Date(1972, 1, 1), 3867\], \[new Date(1973, 1, 1), 3942\], \[new Date(1974, 1, 1), 4017\], \[new Date(1975, 1, 1), 4089\], \[new Date(1976, 1, 1), 4160\], \[new Date(1977, 1, 1), 4232\], \[new Date(1978, 1, 1), 4304\], \[new Date(1979, 1, 1), 4379\], \[new Date(1980, 1, 1), 4451\], \[new Date(1981, 1, 1), 4534\], \[new Date(1982, 1, 1), 4615\], \[new Date(1983, 1, 1), 4696\], \[new Date(1984, 1, 1), 4775\], \[new Date(1985, 1, 1), 4856\], \[new Date(1986, 1, 1), 4941\], \[new Date(1987, 1, 1), 5027\], \[new Date(1988, 1, 1), 5115\], \[new Date(1989, 1, 1), 5201\], \[new Date(1990, 1, 1), 5289\], \[new Date(1991, 1, 1), 5372\], \[new Date(1992, 1, 1), 5456\], \[new Date(1993, 1, 1), 5538\], \[new Date(1994, 1, 1), 5619\], \[new Date(1995, 1, 1), 5699\], \[new Date(1996, 1, 1), 5779\], \[new Date(1997, 1, 1), 5858\], \[new Date(1998, 1, 1), 5935\], \[new Date(1999, 1, 1), 6012\], \[new Date(2000, 1, 1), 6089\], \[new Date(2001, 1, 1), 6165\], \[new Date(2002, 1, 1), 6242\], \[new Date(2003, 1, 1), 6319\], \[new Date(2004, 1, 1), 6396\], \[new Date(2005, 1, 1), 6473\], \[new Date(2006, 1, 1), 6551\], \[new Date(2007, 1, 1), 6630\], \[new Date(2008, 1, 1), 6709\], \[new Date(2009, 1, 1), 6788\] \]); var linearOptions = { title: 'World Population Since 1400 A.D. in Linear Scale', legend: 'none', width: 450, height: 500, hAxis: { title: 'Date' }, vAxis: { title: 'Population (millions)', ticks: \[0, 1000, 2000, 4000, 6000\] } }; var logOptions = { title: 'World Population Since 1400 A.D. in Log Scale', legend: 'none', width: 450, height: 500, hAxis: { title: 'Date' }, vAxis: { title: 'Population (millions)', scaleType: 'log', ticks: \[0, 1000, 2000, 4000, 6000\] } }; var linearChart = new google.visualization.LineChart(document.getElementById('linear_div')); linearChart.draw(data, linearOptions); var logChart = new google.visualization.LineChart(document.getElementById('log_div')); logChart.draw(data, logOptions); }

<br />

If your data contains zero or negative values, you can plot the points using the
`scaleType: 'mirrorLog'` option. In mirror log scale, the plotted value of a
negative number is minus the log of the absolute value of the number. Values close to 0 are plotted
on a linear scale.

The following example shows positive and negative Fibonacci numbers plotted in both mirror log
scale and linear scale.
<button id="change-chart"></button>   

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<button id="change-chart"\>\</button\> \<br\>\<br\> \<div id="chart_div"\>\</div\> google.charts.load('current', {'packages':\['corechart', 'line'\]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Index'); data.addColumn('number', 'Fibonacci Number'); data.addRows(\[ \[-16, -987\], \[-15, 610\], \[-14, -377\], \[-13, 233\], \[-12, -144\], \[-11, 89\], \[-10, -55\], \[-9, 34\], \[-8, -21\], \[-7, 13\], \[-6, -8\], \[-5, 5\], \[-4, -3\], \[-3, 2\], \[-2, -1\], \[-1, 1\], \[0, 0\], \[1, 1\], \[2, 1\], \[3, 2\], \[4, 3\], \[5, 5\], \[6, 8\], \[7, 13\], \[8, 21\], \[9, 34\], \[10, 55\], \[11, 89\], \[12, 144\], \[13, 233\], \[14, 377\], \[15, 610\], \[16, 987\] \]); var linearOptions = { title: 'Fibonacci Numbers in Linear Scale', legend: 'none', pointSize: 5, width: 900, height: 500, hAxis: { gridlines: { count: -1 } }, vAxis: { ticks: \[-1000, -500, 0, 500, 1000\] } }; var mirrorLogOptions = { title: 'Fibonacci Numbers in Mirror Log Scale', legend: 'none', pointSize: 5, width: 900, height: 500, hAxis: { gridlines: { count: -1 } }, vAxis: { scaleType: 'mirrorLog', ticks: \[-1000, -250, -50, -10, 0, 10, 50, 250, 1000\] } }; function drawLinearChart() { var linearChart = new google.visualization.LineChart(chartDiv); linearChart.draw(data, linearOptions); button.innerText = 'Change to Mirror Log Scale'; button.onclick = drawMirrorLogChart; } function drawMirrorLogChart() { var mirrorLogChart = new google.visualization.LineChart(chartDiv); mirrorLogChart.draw(data, mirrorLogOptions); button.innerText = 'Change to Linear Scale'; button.onclick = drawLinearChart; } drawMirrorLogChart(); }

<br />

## Number Formats

You can control the formatting of label numbers with
`hAxis.format` and `vAxis.format`. For instance,
`{hAxis: { format:'#,###%'} }` displays the values "1,000%",
"750%", and "50%" for values 10, 7.5, and 0.5. You can also supply any of
the following presets:


- `{format: 'none'}`: displays numbers with no formatting (e.g., 8000000)
- `{format: 'decimal'}`: displays numbers with thousands separators (e.g., 8,000,000)
- `{format: 'scientific'}`: displays numbers in scientific notation (e.g., 8e6)
- `{format: 'currency'}`: displays numbers in the local currency (e.g., $8,000,000.00)
- `{format: 'percent'}`: displays numbers as percentages (e.g., 800,000,000%)
- `{format: 'short'}`: displays abbreviated numbers (e.g., 8M)
- `{format: 'long'}`: displays numbers as full words (e.g., 8 million)

<br />

In the chart below, you can select among the presets:
none decimal scientific percent currency short long

A complete web page for the above chart follows.
\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<select id="format-select"\> \<option value=""\>none\</option\> \<option value="decimal" selected\>decimal\</option\> \<option value="scientific"\>scientific\</option\> \<option value="percent"\>percent\</option\> \<option value="currency"\>currency\</option\> \<option value="short"\>short\</option\> \<option value="long"\>long\</option\> \</select\> \<div id="number_format_chart"\> google.charts.load('current', {packages:\['corechart'\]}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Country'); data.addColumn('number', 'GDP'); data.addRows(\[ \['US', 16768100\], \['China', 9181204\], \['Japan', 4898532\], \['Germany', 3730261\], \['France', 2678455\] \]); var options = { title: 'GDP of selected countries, in US $millions', width: 500, height: 300, legend: 'none', bar: {groupWidth: '95%'}, vAxis: { gridlines: { count: 4 } } }; var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart')); chart.draw(data, options); document.getElementById('format-select').onchange = function() { options\['vAxis'\]\['format'\] = this.value; chart.draw(data, options); }; };

<br />

```html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>
```

When using a format that employs text (e.g., the `long`
format, which will render 8,000,000 as "8 million", you can localize
the strings into other languages by specifying a language code when
you load the Google Charts library. For instance, to change "8
million" into the Russian "8 миллиона", call the library like so:

```
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>
```