Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

<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>

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.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://api.twelvedata.com/time_series?symbol=AAPL&interval=1day&apikey=4760cc3418bc461bb9c3a8c626d6037b&outputsize=500`, function(data) {
  let tempData = [];
    
    for (var i = 0; i < data.values.length; i++) {
      tempData.push([
        new Date(data.values[i].datetime).getTime(),
        parseFloat(data.values[i].volume),
      ]);
    }
		
		tempData.reverse();
		
		
  // 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(tempData, 1),
      dataGrouping: {
      	enabled: false
      },
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});