Vertical bars on Google candlestick Charts

Question

I am trying to add verticle bars to my Google candlestick chart, but it just does not seem to work. Please see: https://jsfiddle.net/L0a8b04q/

 google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Mon', 28, 28, 38, 38],
          ['Tue', 38, 38, 55, 55],
          ['Wed', 55, 55, 77, 77],
          ['Thu', 77, 77, 66, 66],
          ['Fri', 66, 66, 22, 22]
          // Treat the first row as data.
        ], true);

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

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

I am looking for a grid like this:

What I am missing or doing wrong here?

WhiteHat WhiteHat · Accepted Answer · 2018-05-24T11:39:50

grid lines will only be present on a continuous axis (number, date)
they do not appear for a discrete axis (string)

in this case, to add grid lines for the x-axis,
use a number column, rather than string

you can use the formatted value of the cell to display the day of the week

[{v: 1, f: 'Mon'}, 20, 28, 38, 48],

and the same notation for the axis labels (ticks)

hAxis: { ticks: [{v: 1, f: 'Mon'}, {v: 2, f: 'Tue'}, ...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [{v: 1, f: 'Mon'}, 20, 28, 38, 48],
    [{v: 2, f: 'Tue'}, 30, 38, 55, 65],
    [{v: 3, f: 'Wed'}, 50, 55, 77, 87],
    [{v: 4, f: 'Thu'}, 50, 66, 77, 86],
    [{v: 5, f: 'Fri'}, 10, 22, 66, 82]
  ], true);

  var options = {
    legend: 'none',
    bar: { groupWidth: '100%' }, // Remove space between bars.
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
    },
    vAxis: { gridlines: { count: 5 }},
    hAxis: { ticks: [{v: 1, f: 'Mon'}, {v: 2, f: 'Tue'}, {v: 3, f: 'Wed'}, {v: 4, f: 'Thu'}, {v: 5, f: 'Fri'}]}
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Vertical bars on Google candlestick Charts

1 Answers