Reply To: Renko chart in Angular.

[Indranil]

@azadcoder,

You can define a function to perform the manipulation to create dataPoints for Renko chart and call the same function inside the class before rendering the chart as shown below –

renderRenko(brickSize, data) {
    var newDataPoints = [];
    var oldValue = data[0].dataPoints[0].y[3];
    var difference = 0;
    var newValue, dataPoint, xValue;
    for (var i = 1; i < data[0].dataPoints.length; i++) {
      dataPoint = data[0].dataPoints[i].y[3];
      xValue = CanvasJS.formatDate(data[0].dataPoints[i].x, "MMM-YYYY");
      difference = dataPoint - oldValue;
      if(difference > 0 && difference > brickSize) {
        for(var j = 0; j < Math.floor(difference / brickSize); j++) {
          newValue = oldValue + brickSize;
          newDataPoints.push({content: xValue, y: [oldValue, newValue], color: "#86B402"});
          oldValue = newValue;
        }
      }
      else if(difference < 0 && Math.abs(difference) > brickSize) {
        for(var j = 0; j < Math.floor(Math.abs(difference) / brickSize); j++) {
          newValue = oldValue - brickSize;
          newDataPoints.push({content: xValue, y: [oldValue, newValue], color: "#C24642"});
          oldValue = newValue;	
        }
      }
    }
    var newData = [{
      type: "rangeColumn",
      toolTipContent: "<b>{content}</b> <br> {y[0]} - {y[1]}",
      dataPoints: newDataPoints
    }];
    return newData;
}

export class AppComponent  {
  ngOnInit() { 
   . 
   .
   .
   .
   chart.options.data = this.renderRenko(50, data);
   chart.render();
}

Please take a look at this StackBlitz for a working example.

___________
Indranil Deo
Team CanvasJS