Home Forums StockChart Support Scale ratio in canvasjs for both axes

# Scale ratio in canvasjs for both axes

Viewing 4 posts - 1 through 4 (of 4 total)
• #36611

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.

#36618

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

#36617

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.

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

#36624

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.