How to set and adjust plots with equal axis aspect ratios - CHART.js

user_17900573 0
Viewed 177

I have a project where I show the movements of the robot, I want to make this map so that the x and y scales are proportional to each other. These data are real-time data, which, as I mentioned, shows the movement of a robot. Can anyone help me with this?

This is the figure: enter image description here

myChart = new Chart(ctx, {

type: 'scatter',

data: {

    datasets: [{

        label: '',

        backgroundColor: "blue",
        
        fill: false,

        data: [],

    }]

},

options: {

    scales: {

        xAxes: [{

            ticks:{

                suggestedMax:15,

            }

        }]

        yAxes: [{

            ticks:{

                suggestedMax:15,

            }

        }]

    }

}

});
aspect chart.js aspect-ratio axis javascript
1 Answers

You can define the desired dimension of your canvas through the width or height property.

<canvas id="chartContainer" width="400"></canvas>

...or using CSS.

canvas {
  width: 400px;
}

Further you should also define responsive: false and aspectRatio: 1 within the chart options, latter represents a square canvas.

options: {
  responsive: false,
  aspectRatio: 1,

See Configuration Options at the Chart.js documentation

user_23584090
Related