Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

function linearDataToRenko(data, change) {
  var renkoData = [],
    prevPrice = data[0][1],
    prevTrend = 0, // 0 - no trend, 1 - uptrend, 2 - downtrend
    length = data.length,
    currentChange,
    i = 1,
    j;


  for (; i < length; i++) {
  	currentChange = data[i][1] - data[i - 1][1];
    if (currentChange > change) {
      // Up trend

      if (prevTrend === 2) {
        prevPrice += change;
      }
			
      for (j = 0; j < currentChange / change; j++) {
        renkoData.push({
          x: data[i][0] + j,
          y: prevPrice,
          low: prevPrice,
          high: prevPrice + change
        });
        prevPrice += change;
      }

      prevTrend = 1;
      
    } else if (Math.abs(currentChange) > change) {

      if (prevTrend === 1) {
        prevPrice -= change;
      }
      // Down trend
      for (j = 0; j < Math.abs(currentChange) / change; j++) {
        renkoData.push({
          x: data[i][0] + j,
          y: prevPrice,
          low: prevPrice - change,
          high: prevPrice,
          color: 'black'
        });
        prevPrice -= change;
      }

      prevTrend = 2;
    }
  }
  return renkoData;
}


$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {


    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Stock Price'
    },

    series: [{
      name: 'AAPL',
      type: 'columnrange',
      fillColor: 'transparent',
      turboThreshold: 0,
      groupPadding: 0,
      pointPadding: 0,
      borderWidth: 1,
      data: linearDataToRenko(data, 1), // change "1" to check smaller steps. 
      dataGrouping: {
      	enabled: false
      },
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});