Gap between candlestick

Question

Im trying to plot a candlestic chart for a stock. But since its closed during weekends there is a gap in the chart

Is there a option im missing?? I want to remove the gap without loss of the dates.

This is the code:

google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    //Date, Low, Open, CLose, High, Col 5 [Optional]: A tooltip or style column for the candlestick
    function drawChart() {

        var data = google.visualization.arrayToDataTable(dps, true);
        var options = {
            legend: 'none',
            colors: ['#000'],

            candlestick: {
                fallingColor: { strokeWidth: 0, fill: '#D32F2F' }, // red
                risingColor: { strokeWidth: 0, fill: '#00796B' } // green
            }

        };

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

        chart.draw(data, options);

    }

Here is some test data:

var test = [
        [new Date("2016-11-11"), 250.6, 250.9, 250.7, 254.4],
        [new Date("2016-11-14"), 250.3, 252.8, 251.6, 257.9],
        [new Date("2016-11-15"), 254.9, 255, 263.6, 263.8],
        [new Date("2016-11-16"), 258.1, 264.3, 260.1, 264.3],
        [new Date("2016-11-17"), 259.6, 260, 268.3, 268.9],
        [new Date("2016-11-18"), 267.5, 268, 270.4, 272.3],
        [new Date("2016-11-21"), 265.7, 271.2, 269.1, 271.5]
    ];

I added the data to the question, thanks. :) – Jedi Schmedi Jan 11 '17 at 10:01 — Jedi Schmedi, Jan 11 '17 at 10:01

score 1 · Accepted Answer · edited May 23 '17 at 12:25

using a discrete axis, with string values instead of dates, will prevent the gap from appearing

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});
function drawChart() {
  var dps = [
    [new Date(2016,10,11), 250.6, 250.9, 250.7, 254.4],
    [new Date(2016,10,14), 250.3, 252.8, 251.6, 257.9],
    [new Date(2016,10,15), 254.9, 255, 263.6, 263.8],
    [new Date(2016,10,16), 258.1, 264.3, 260.1, 264.3],
    [new Date(2016,10,17), 259.6, 260, 268.3, 268.9],
    [new Date(2016,10,18), 267.5, 268, 270.4, 272.3],
    [new Date(2016,10,21), 265.7, 271.2, 269.1, 271.5]
  ];

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM dd, yyyy'
  });
  dps.forEach(function (row) {
    row[0] = formatDate.formatValue(row[0]);
  });

  var data = google.visualization.arrayToDataTable(dps, true);
  var options = {
    legend: 'none',
    colors: ['#000'],
    candlestick: {
      fallingColor: {
        strokeWidth: 0,
        fill: '#D32F2F'
      },
      risingColor: {
        strokeWidth: 0,
        fill: '#00796B'
      }
    }
  };

  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>

also, recommend not using the following date constructor when loading google data
new Date("yyyy-MM-dd")

you'll notice in the "candlesticks" don't align properly to the gridlines,
here is another question demonstrating the issue

you may also end up with a different date, depending on the timezone / time of year,
as demonstrated in this question

instead, recommend using one of the following date constructors...

new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

(keep in mind, month is zero based in the above)

-- or --

new Date("MM/dd/yyyy")

Seems to be working but I get the error: TypeError: google.visualization.DateFormat is not a constructor — Jedi Schmedi, Jan 11 '17 at 20:32
hard to say without seeing the latest code, are you waiting for the google `callback` before using `DateFormat`? works in the above... — WhiteHat, Jan 11 '17 at 20:36

Gap between candlestick

1 Answers1