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


    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?



    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.

    Y-axis scaling

    Hope this detail allows you to better understand my query.




    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.