Google Charts - Basic Candlestick Chart

Following is an example of a basic candlestick chart. A candlestick chart is generally used to show an opening and closing value which are overlaid on top of a total variance. Candlestick charts are often used to show stocks value behavior. In this chart, filled boxes are drawn for items where the opening value is less than the closing value (a gain) and , and hollow boxes are drawn where the opening value of item is more than the closing value (a loss). We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.

Configurations

We've used CandlestickChart class to show candlestick based chart.

//candlestick chart
var chart = new google.visualization.CandlestickChart
(document.getElementById('container'));

Example

googlecharts_candlestick_basic.htm

Live Demo

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Mon', 20, 28, 38, 45],
               ['Tue', 31, 38, 55, 66],
               ['Wed', 50, 55, 77, 80],
               ['Thu', 77, 77, 66, 50],
               ['Fri', 68, 66, 22, 15]
               // Treat first row as data as well.
            ], true);
              
            // Set chart options
            var options = {legend: 'none'};

            // Instantiate and draw the chart.
            var chart = new google.visualization.CandlestickChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

googlecharts_candlestick_charts.htm