Customized Candlestick Chart

Following is an example of a customized candlestick chart. 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 candlestick configuration to customize the calendar.

// Set chart options
var options = {
   legend: 'none',
   bar: { groupWidth: '100%' },     // Remove space between bars.
   candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
   }
};

Example

googlecharts_candlestick_customized.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',
               bar: { groupWidth: '100%' },   // Remove space between bars.
               candlestick: {
                  fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                  risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
               }
            };

            // 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