# Visualization: Bar 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/imagebarchart#Overview)
2. [Example](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Example)
3. [Loading](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Loading)
4. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Data_Format)
5. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Configuration_Options)
6. [Methods](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Methods)
7. [Events](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Events)
8. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/imagebarchart#Data_Policy)

# Overview


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

# Example

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<script type="text/javascript"\> google.charts.load('current', {'packages':\['imagebarchart'\]}); \</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.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); }

```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:["imagebarchart"]});
      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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>
```

## Loading


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

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


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

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

## Data Format


The first column should be a string, and contain the category label.
Any number of columns can follow, all must be numeric.
Each column is displayed as a set of bars.
When the data table contains more than one numeric column, values in a row
are displayed as stacked bars.

## 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/imagebarchart#Events) below. |
| height | number | Container's height | Height of the chart in pixels. |
| isStacked | boolean | true | Controls whether multiple data columns will be displayed as stacked (as opposed to grouped) bars. |
| isVertical | boolean | false | Controls whether the bars will be vertical. |
| 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. |
| showValueLabels | boolean | true | If set to false, removes the labels of the values. |
| 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).