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,
    i = 1;


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

      if (prevTrend === 2) {
        prevPrice += change;
      }

      renkoData.push({
        x: data[i][0],
        y: prevPrice,
        low: prevPrice,
        high: prevPrice + change
      });

      prevPrice += change;
      prevTrend = 1;
      
    } else if (Math.abs(data[i][1] - data[i - 1][1]) > change) {

      if (prevTrend === 1) {
        prevPrice -= change;
      }
      // Down trend
      renkoData.push({
        x: data[i][0],
        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),
      dataGrouping: {
      	enabled: false
      },
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});