Scale ratio in canvasjs for both axes

[mustadirmahmood]

Hi,

I am trying to implement a scale of 1:20 (1mm: 20mm), for example, on my chart. So basically it would mean that exactly 1mm on the chart’s x-axis will be equivalent to 20mm in real value. Also for the y-axis I want to implement a scale feature.

Could you please help find a solution?

[Thangaraj Raman]

@mustadirmahmood,

The dataPoints in a chart are plotted based on pixel coordinates. You can convert millimeter to pixel value by multiplying it by 3.7795. Please find the code snippet below.

function convertMillimeterToPixel(mm) {
	return (mm * 3.7795);
}

Please take a look at this JSFiddle for an example on setting chart width & height in millimeters. You can use legendText to display the scale-ratio.

—
Thangaraj Raman
Team CanvasJS

[mustadirmahmood]

I would like to add some details to my query. In a map, we have a scale (ex. 1: 2000000), where 1mm on the map represents 2km of real life distance.
My chart will work in a similar way. Here y-axis represents distance and I want a scale to map exact 1mm on the chart’s y-axis with the real life distance.

Consider the fiddle link: https://jsfiddle.net/mustadirmahmood/ovwebL51/41/
Here I want a scale ratio of 1mm:2mm.
Here the highest y-coordinate is 30mm. I want the distance from x-axis to that y-coordinate(y=30mm) to be exactly 15mm on a ruler.

Hope this detail allows you to better understand my query.

Thanks

[Thangaraj Raman]

@mustadirmahmood,

To achieve your requirement, you can loop through the dataPoints and convert each y-value from millimeter to pixel as the chart is rendered based on pixels. Please take a look at this updated JSFiddle for a working example on the same.

—
Thangaraj Raman
Team CanvasJS