You must be logged in to post your query.
Home › Forums › StockChart Support › Scale ratio in canvasjs for both axes
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?
@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
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
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.
You must be logged in to reply to this topic. Login/Register