Charts.Js Graph Not Scaling to Canvas Size

Chart.js canvas resize

I had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and I found a simpler way to do it, hope it will help :)

Use these Chart.js options:

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,

React chart : prevent chart's canvas scaling with height and width

In my case, setting
maintainAspectRatio:false along with supplying height/width on div

<div style={{height:'100px',width:'200px'}}>
<HorizontalBar data={data} options={chartOptions}/>
</div>

helped in restricting the canvas's scalability.

Relevant Source: https://www.chartjs.org/docs/latest/general/responsive.html#important-note

Set height of chart in Chart.js

Seems like var ctx = $('#myChart'); is returning a list of elements. You would need to reference the first by using ctx[0].
Also height is a property, not a function.

I did it this way in my code:

var chartEl = document.getElementById("myChart");
chartEl.height = 500;

charts.js chart size it's diferente than container setted size

try to add 2 properties to options object:

responsive: true,
maintainAspectRatio: false

Chart.js unwanted canvas resizing

Presumably the option you need is devicePixelRatio, which will:

Override the window's default devicePixelRatio.

I've not tested it, and the documentation isn't 100% clear, but I assume this goes in the root of the options object:

options: {
  devicePixelRatio: 1
}