Candlestick Image Chart

Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy.

Overview
Example
Loading
Data Format
Configuration Options
Methods
Events
Data Policy

Overview

A candlestick chart that is rendered as an image using the Google Charts API.

A candlestick chart is used to show an opening and closing value overlaid on top of a total variance. Candlestick charts are often used to show stock value behavior. In this chart, items where the opening value is less than the closing value are drawn in green, and items where the opening value is more than the closing value are drawn in red. See the candlestick documentation in the Google Charts API for more information.

Example

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

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Loading

The google.charts.load package name is "imagechart".

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

The visualization's class name is google.visualization.ImageCandlestickChart.

  var visualization = new google.visualization.ImageCandlestickChart(container);

Data Format

Five columns, where each row describes a single candlestick marker:

Col 0: String used as a label for this marker on the X axis.
Col 1: Number specifying the low/minimum value of this marker. This is the base of the black line.
Col 2: Number specifying the opening/initial value of this marker. This is one vertical border of the candle. If less than the column 3 value, the candle will be green; otherwise it will be red.
Col 3: Number specifying the closing/final value of this marker. This is the second vertical border of the candle. If less than the column 2 value, the candle will be red; otherwise it will be green.
Col 4: Number specifying the high/maximum value of this marker. This is the top of the black line.

Configuration Options

In addition to the options supported by the Generic Image Chart, the Candlestick Chart supports the following options:

Name	Type	Default	Description
backgroundColor	string	'#FFFFFF' (white)	The background color for the chart. This is a #RRGGBB string, including the # mark.
showAxisLines	boolean	true	Whether to show the axis lines. If set to false, then the axis labels will also not be shown.
height	number	Height of the containing element	Height of the chart, in pixels. If 30 < height or height > 1,000 then this value will default to 200.
max	number	Maximum data value	The maximum Y axis value.
min	number	Minimum data value	The minimum Y axis value.
showCategoryLabels	boolean	true	If false, hides the X axis labels.
showValueLabels	boolean	true	If false, hides the Y axis labels.
showValueLabelsInternal	number	auto	The spacing between the Y axis labels, in pixels.
title	string	''	Text to display above the chart.
width	number	Width of the containing element	Width of the chart, in pixels. If width is less than 30 or greater than 1,000, then width will be set to 300.

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

Data Policy

Please refer to the Chart API logging policy.