Search code examples
javascriptchartshighchartszooming

HightCharts Renko chart disapear after zoom

I used this example in the HightCharts library to make a Renko chart, Everything works fine with this example. But when I use my own data to show a chart It works fine but when I zoom the chart it disappears. I don't know what the problem the data is the same as the example.

The example with my data https://jsfiddle.net/aypx6nfo/

Before zoom.

enter image description here

After zoom

enter image description here

MY CODES

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=MY-API-KEY&outputsize=500`, function(data) {
  let tempData = [];
    
    for (var i = 0; i < data.values.length; i++) {
      tempData.push([
        new Date(data.values[i].datetime),
        parseFloat(data.values[i].volume),
      ]);
    }
    
  // 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
      }
    }]
  });
});
Solution

  • You need to use timestamps in milliseconds as x values and sort your 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();

    Live demo: https://jsfiddle.net/BlackLabel/f8sex6zj/

    API Reference: https://api.highcharts.com/highstock/series.columnrange.data