Canvas js error on displaying right side axis labels

[ashkhanna]

I’m using canvasjs 1.2.2. I have a stepline chart and I have primary and secondary axis. Primary axis has one label and secondary axis has 5 labels and I get an error when the chart is rendered @ Axis.prototype.renderGrid(function name).

[code]
Axis.prototype.renderGrid = function () {
var xy;
var plotAreaCoordinates = this.chart.getPlotArea();

//return;

if (this._position === “bottom” || this._position === “top”) {

if (this.gridThickness && this.gridThickness > 0) {
this.ctx.lineWidth = this.gridThickness;
this.ctx.strokeStyle = this.gridColor;

this.ctx.beginPath();
for (i = 0; i < this._labels.length; i++) {

if (this._labels[i].position < this.minimum || this._labels[i].position > this.maximum)
continue;

xy = this.getPixelCoordinatesOnAxis(this._labels[i].position);

this.ctx.moveTo(xy.x << 0, plotAreaCoordinates.y1 << 0);
this.ctx.lineTo(xy.x << 0, plotAreaCoordinates.y2 << 0);
this.ctx.stroke();

}
}

}
else if (this._position === “left” || this._position === “right”) {

if (this.gridThickness && this.gridThickness > 0) {
this.ctx.lineWidth = this.gridThickness;
this.ctx.strokeStyle = this.gridColor;

this.ctx.beginPath();
//When it goes through the for loop I get an error
for (var i = 0; i < this._labels.length; i++) {

if (this._labels[i].position < this.minimum || this._labels[i].position > this.maximum)
continue;

xy = this.getPixelCoordinatesOnAxis(this._labels[i].position);

this.ctx.moveTo(plotAreaCoordinates.x1 << 0, xy.y << 0);
this.ctx.lineTo(plotAreaCoordinates.x2 << 0, xy.y << 0);
this.ctx.stroke();
}
}

}
}
[/code]

In the above code when it goes through for loop I get an error about Unresponsive script — I have tried modifying the font size for label title, also looks like it’s going through a infinite loop as well. Any idea as to what is going on???

I appreciate your timely response!

[ashkhanna]

I figured it out.