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.


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

//candlestick chart
var chart = new google.visualization.CandlestickChart



      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "">
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      <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);


Verify the result.