HTML
<body> <div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;"> <div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue"> <canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas> </div> </div> </body>JAVASCRIPT
<script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var radius = 0.5; var options = { title: { display:false, }, legend: { display:false }, tooltip: { enabled:false }, animation: { duration: 0 } } var data = { datasets: [ { data: [50, 50], backgroundColor: ["blue", "red"], borderWidth: 0 } ] } var chart = new Chart(context, { type: "doughnut", cutout: 100 * radius, responsive: true, data: data, options: options }); </script>VIOLÍN
https://jsfiddle.net/t5a41rdj/
Según el título, de alguna manera este gráfico tiene un pequeño desplazamiento en la parte superior del que parece que no puedo deshacerme, a pesar de haber deshabilitado la leyenda y el título.
¿Algo obvio que me estoy perdiendo?
Esto se debe a que no deshabilitó la leyenda, el título o la información sobre herramientas. Si pasa el cursor sobre su gráfico, puede ver que la información sobre herramientas sigue funcionando, el título está oculto de forma predeterminada. Por qué no se muestra la leyenda, realmente no lo sé, aún debería mostrar 1 elemento con texto indefinido. Pero si lo deshabilita en el espacio correcto con el espacio de nombres de los plugins , verá que su relleno adicional desaparece.
También se debe configurar el recorte y la respuesta en las opciones que no están en la raíz del nuevo gráfico:
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var radius = 0.5; var options = { plugins: { legend: { display: false }, tooltip: { enabled: false } }, animation: { duration: 0 }, cutout: 100 * radius, responsive: true, } var data = { datasets: [{ data: [50, 50], backgroundColor: ["blue", "red"], borderWidth: 0, }] } var chart = new Chart(context, { type: "doughnut", data: data, options: options }); <body> <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;"> <div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue"> <canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>