Candlestick Chart Example

An example of a Google Candlestick Chart.

by LyndseyB

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="o-chart-with-overlay">
  <div class="js-chart"></div>
  <div class="js-chart__overlay"></div>
</div>

SCSS

.o-chart-with-overlay {
  position: relative;
  
  &__overlay {
    position: absolute;
    font-size: 0.8em;
  }
}

JavaScript

google.charts.load("current", {"packages": ["corechart"] });
 google.charts.setOnLoadCallback(drawChart);
 
function createOverlayMarker(valueToDisplay, dataValueY, chartWidth) {
	var valueAsPercentage = (valueToDisplay * 100).toFixed(1) + "%";
	var overlayMarker = document.createElement("span");  
  
  overlayMarker.className = "o-chart-with-overlay__overlay";
  overlayMarker.innerText = valueAsPercentage;
  overlayMarker.style.top = dataValueY + "px";
  overlayMarker.style.left = (chartWidth / 2) + (chartWidth * 0.05) + "px";
  
  return overlayMarker;
}
 
function placeLabels(dataTable, dataLength, chartWidth, middleValue) {
	var cli = this.getChartLayoutInterface();
  var chartArea = cli.getChartAreaBoundingBox();
  var chartOverlay = document.querySelector(".js-chart__overlay");
  
  var counter = 1;    
  var dataValue;
  var dataValueX;
  var dataValueY;
  var overlayMarker;
  var middleOverlayMarker;
  
  while(counter < dataLength) {  	
  	dataValue = dataTable.getValue(0, counter);
    
    dataValueX = Math.floor(cli.getXLocation(counter));
    dataValueY = Math.floor(cli.getYLocation(dataTable.getValue(0, counter)));
    overlayMarker = createOverlayMarker(dataValue, dataValueY, chartWidth);
    
    chartOverlay.appendChild(overlayMarker);  
  	counter += 1;
  }
 
  middleOverlayMarker = createOverlayMarker(middleValue, cli.getYLocation(middleValue), chartWidth);
  chartOverlay.appendChild(middleOverlayMarker);
}

function drawChart() { 
	var chartData = ["Performance", -0.071, -0.016, 0.084, 0.134];
  var middleValue = 0.036;
  var data = google.visualization.arrayToDataTable([chartData], true);

  var options = {
    width: 600,
    height: 600,
    legend: "none",
    bar: { 
      // width of single bar
    	groupWidth: "10%"
    },
    vAxis: {
    	format: "percent"
    },
    tooltip: {
    	trigger: "none"
    }
  };

  var chart = new google.visualization.CandlestickChart(document.querySelector(".js-chart"));
 ...