Presta atención ya que en este post hallarás el resultado que buscas.
Solución:
Tuve muchos problemas con eso, porque después de todo eso, mi gráfico de líneas se veía terrible cuando se movía el mouse y encontré una forma más simple de hacerlo, espero que ayude 🙂
Utilice estas opciones de Chart.js:
// 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,
Lo que sucede es que Chart.js multiplica el tamaño del lienzo cuando se llama y luego intenta reducirlo utilizando CSS, con el objetivo de proporcionar gráficos de mayor resolución para dispositivos de alta resolución.
El problema es que no se da cuenta de que ya lo ha hecho, por lo que cuando se le llama varias veces, multiplica el tamaño ya (doblado o lo que sea) OTRA VEZ hasta que las cosas comienzan a romperse. (Lo que realmente está sucediendo es verificar si debe agregar más píxeles al lienzo cambiando el DOM attribute para ancho y alto, si debería, multiplicándolo por algún factor, generalmente 2, luego cambiándolo y luego cambiando el estilo css attribute para mantener el mismo tamaño en la página).
Por ejemplo, cuando lo ejecuta una vez y el ancho y la altura de su lienzo están configurados en 300, los configura en 600 y luego cambia el estilo. attribute a 300… pero si lo vuelve a ejecutar, verá que el ancho y el alto del DOM son 600 (verifique la otra respuesta a esta pregunta para ver por qué) y luego lo establece en 1200 y el ancho y alto del css en 600.
No es la solución más elegante, pero resolví este problema mientras mantenía la resolución mejorada para dispositivos retina simplemente configurando el ancho y el alto del lienzo manualmente antes de cada llamada sucesiva a Chart.js
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
Esto funciona para mí:
El hecho esencial es que tenemos que establecer el tamaño del lienzo en la etiqueta div.