Deprecated
This visualization has been replaced with a new version; please use that instead. For easy migration, please refer to the release notes page.
Overview
A vertical bar chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries. For a horizontal version of this chart, see the Bar Chart.
By: Google
Example
Code it yourself on the Visualization Playground
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["columnchart"]}); google.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.ColumnChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Loading
The google.load
package name is "columnchart"
google.load("visualization", "1", {packages: ["columnchart"]});
The visualization's class name is google.visualization.ColumnChart
var visualization = new google.visualization.ColumnChart(container);
Data Format
Each row in the table represents a group of adjacent bars.
The first column in the table should be a string, and represents the label of that group of bars. Any number of columns can follow, all numeric, each representing the bars with the same color and relative position in each group.
The value at a given row and column controls the height of the single bar represented by this row and column.
Configuration Options
Name | Type | Default | Description |
---|---|---|---|
axisColor | string or Object | default color | The color of the axis. Possible values are as those of the backgroundColor configuration option. |
axisBackgroundColor | string or Object | default color | The border around axis background. Possible values are as those of the backgroundColor configuration option. |
axisFontSize | number | automatic | Font size of the chart axis text, in pixels. |
backgroundColor | string or Object | default color | The background color for the main area of the chart.
May be one of the following options:
|
borderColor | string or Object | default color | The border around chart elements. Possible values are as those of the backgroundColor configuration option. |
colors | Array of strings or objects | Default colors | An array of colors, where each element specifies the color of one series. You should specify one array element for each series.
|
enableTooltip | boolean | true | If set to true, tooltips are shown when the user clicks on a column. |
focusBorderColor | string or Object | default color | The border around chart elements that are in focus (pointed by the mouse). Possible values are as those of the backgroundColor configuration option. |
height | number | Container's height | Height of the chart in pixels. |
is3D | boolean | false | If set to true, displays a three-dimensional change. |
isStacked | boolean | false | If set to true, line values are stacked (accumulated). |
legend | string | 'right' | Position and type of legend. Can be one of the following:
|
legendBackgroundColor | string or Object | default color | The background color for the legend area of the chart. Possible values are as those of the backgroundColor configuration option. |
legendFontSize | number | automatic | The size of the legend font, in pixels. |
legendTextColor | string or Object | default color | The color for the text entries of the legend. Possible values are as those of the backgroundColor configuration option. |
logScale | boolean | false | If true, the main axis should be scaled logarithmically. |
max | number | automatic | Specifies the highest Y axis grid line. The actual grid line will be the greater of two values: the max option value, or the highest data value, rounded up to the next higher grid mark. |
min | number | automatic | Specifies the lowest Y axis grid line. The actual grid line will be the lower of two values: the min option value, or the lowest data value, rounded down to the next lower grid mark . |
reverseAxis | boolean | false | If set to true, will draw categories from right to left. The default is to draw left-to-right. |
showCategories | boolean | true | If true, will show category labels. If false, will not. |
title | string | no title | Text to display above the chart. |
titleX | string | no title | Text to display below the horizontal axis. |
titleY | string | no title | Text to display by the vertical axis. |
titleColor | string or Object | default color | The color for the chart's title. Possible values are as those of the backgroundColor configuration option. |
titleFontSize | number | automatic | The font size for the chart title, in pixels. |
tooltipFontSize |
number | 11 | The font size of the tooltip text. This might be reduced, if the tooltip is too small to hold the text in the specified font. |
tooltipHeight |
number | 60 | The height of the tooltip, in pixels. The tooltip height is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than 1/3 the chart height will be cropped. |
tooltipWidth | number | 120 | The width of the tooltip, in pixels. The tooltip width is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than the chart width will be cropped. |
width | number | Container's width | Width of the chart in pixels. |
Methods
Method | Return Type | Description |
---|---|---|
draw(data, options) |
none | Draws the chart. |
getSelection() |
Array of selection elements | Standard getSelection() implementation.
Selected elements are column and cell elements. Only one column or cell can
be selected at a time by the user. |
setSelection() |
none | Standard setSelection() implementation, but supports selection
of only one element. Treats every selection entry as a column or cell selection.
Note that the label column cannot be selected. |
Events
Name | Description | Properties |
---|---|---|
onmouseover |
Fired when the user mouses over a bar, and passes in the row and column indexes of the corresponding cell. | row, column |
onmouseout |
Fired when the user mouses away from a bar, and passes in the row and column indexes of the corresponding cell. | row, column |
ready |
The chart is ready for external method calls. If you want to interact with
the chart, and call methods after you draw it, you should set up a listener
for this event before you call the draw method, and call
them only after the event was fired |
None |
select |
Fired when the user clicks a bar or legend. When a bar is selected, the corresponding
cell in the data table is selected; when a legend is selected, the corresponding
column in the data table is selected. To learn what has been selected, call getSelection() . |
None |
Data Policy
All code and data are processed and rendered in the browser. No data is sent to any server.