# Visualization: Area Chart (Image)

**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](https://developers.google.com/chart/terms).
1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Overview)
2. [Example](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Example)
3. [Loading](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Loading)
4. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Data_Format)
5. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Configuration_Options)
6. [Methods](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Methods)
7. [Events](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Events)
8. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Data_Policy)

## Overview


An area chart that is rendered as an image using the [Google Charts API](https://developers.google.com/chart/image/docs/gallery/line_charts).

## Example

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<script type="text/javascript"\> google.charts.load('current', {'packages':\['imageareachart'\]}); \</script\> \<div id="chart_div" style="width: 400px; height: 240px;"\>\</div\> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(\[ \['Year', 'Sales', 'Expenses'\], \['2004', 1000, 400\], \['2005', 1170, 460\], \['2006', 660, 1120\], \['2007', 1030, 540\] \]); var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'}); }

```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:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>
```

## Loading


The `google.charts.load` package name is `"imageareachart"`

```
  google.charts.load('current', {packages: ['imageareachart']});
```


The visualization's class name is `google.visualization.ImageAreaChart`

```
  var visualization = new google.visualization.ImageAreaChart(container);
```

## Data Format


Each column represents a line in the chart; each entry is the Y axis value at the
same X axis point, and the visualization connects them with a straight line, then
fills in the area below the line.

Data is processed by column, starting at column
zero and increasing. You shoud write the highest lines first, then the
lower lines, because if you painted a lower line first, a higher line would
paint over and hide any lower lines. Therefore try to make column 1 have higher
points than column 2, column 2 higher than column 3, and so on. If you have one
or two points higher on a right column than a left column, it might partially obscure
the lower line, but it should still be visible.

All data must be numeric type except for the first, which can be either numeric
or string. If the first column is a string type, the first column entries will
be displayed as labels on the X; if the first column is a number, no X axis labels
will be shown. All columns (except the first) must be numbers. There is no limit
to the number of columns.

## Configuration Options

| Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). |
| colors | Array\<string\> | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). Color i is used for data column i, wrapping around to the beginning if there are more data columns than colors. If variations of a single color is acceptable for all series, use the `color` option instead. |
| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See [Events](https://developers.google.com/chart/interactive/docs/gallery/imageareachart#Events) below. |
| height | number | Container's height | Height of the chart in pixels. |
| legend | string | 'right' | Position and type of legend. Can be one of the following: - 'right' - To the right of the chart. - 'left' - To the left of the chart. - 'top' - Above the chart. - 'bottom' - Below the chart. - 'none' - No legend is displayed. |
| max | number | automatic | The maximal value to show in the Y axis. |
| min | number | automatic | The minimal value to show in the Y axis. |
| showCategoryLabels | boolean | true | If set to false, removes the labels of the categories (the X axis labels). |
| showValueLabels | boolean | true | If set to false, removes the labels of the values (the Y axis labels). |
| title | string | no title | Text to display above the chart. |
| valueLabelsInterval | number | Auto | The interval at which to show value axis labels. For example, if `min` is 0, `max` is 100, and `valueLabelsInterval` is 20, the chart will show axis labels at (0, 20, 40, 60, 80 100). |
| width | number | Container's width | Width of the chart in pixels. |

## Methods

| Method | Return Type | Description |
|---|---|---|
| `draw(data, options)` | none | Draws the chart. |

## Events

You can register to hear the events described on the [Generic
Image Chart](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Events) page.

## Data Policy


Please refer to the [Chart API logging policy](https://developers.google.com/chart/interactive/faq#logging).