Chart.Js Canvas Resize

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,

Resize Chart Independently From Legend in ChartJS for Canvas Download

After some more tinkering, I have found the solution to the problem.

As it happens, ChartJs sets a default max-width for the legend (although it doesn't specify this in the documentation). By setting legend max width to a high value, the legend can assume the whole canvas e.g.

legend: {
  position: 'left',
  align: 'start',
  fullSize: false,
  labels: {
    font: {
      size: 12
    },
    padding: 10
  },
  maxWidth: 9999
}

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
}

Resize chart.js canvas for printing

The problem is the chart does not fit the new print width dimension. Fortunately we can perform a redraw when print is initiated.

The solution is to render your chart to an image using the canvas.toDataURL() method when printing is invoked, then switch it back to the canvas chart after printing. More on toDataURL().

To detect when to invoke your functions webkit provide the method window.matchMedia('print') (which will be true during print or false again afterwards) while other browsers use window.onbeforeprint and window.onafterprint. More on print methods.

All that is then left to do is ensure the image is responsive using CSS, i.e. scales to 100% width.