How to Create a 1:1 Ratio Scale Chart in Canvasjs

[santhoshnarendra]

Detailed Explanation : The Scale should be 1:1 for a chart with width of 1024px and height of 350px . The interval for either axis should be same .

[Vishwas R]

@santhoshnarendra,

You can achieve the above requirements by setting width, height and axis interval properties as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[santhoshnarendra]

https://jsfiddle.net/santy_naren/6sy7rjed/3/ Kindly Find this Fiddle and its not scaling as used from your Fiddle . Needed for Dynamic data , scale setting to be 1:1

[Vishwas R]

@santhoshnarendra,

The example that has been shared has same range over axisX and axisY. In your case, the range of both the axes are different due to which the labels of axes / scale doesn’t match.

—
Vishwas R
Team CanvasJS

[Sungwoo Koo]

How can i get 1:1 ratio view when i zoom it?

[Vishwas R]

@likewatchk,

Setting axisY viewportMinimum & viewportMaximum same as axisX in rangeChanged event-handler should work in your case. Please find the code-snippet below.

rangeChanged: function(e){
  e.chart.axisY[0].set("viewportMinimum", e.axisX[0].viewportMinimum, false);
  e.chart.axisY[0].set("viewportMaximum", e.axisX[0].viewportMaximum);      
}

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

—
Vishwas R
Team CanvasJS