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.

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. 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.