bastante nuevo en JS y tengo un problema extraño con el gráfico de barras JS.
<script> $(document).ready(function() { var bar = document.getElementById("chart-bar-11").getContext('2d'); var data1 = { labels: ["Yesterday"], datasets: [{ label: "Win", data: [{{ gam }}], borderColor: '#4099ff', backgroundColor: '#4099ff', hoverborderColor:'#4099ff', hoverBackgroundColor: '#4099ff', }, { label: "Lose", data: [{{ results }}], borderColor: '#0e9e4a', backgroundColor: '#0e9e4a', hoverborderColor:'#0e9e4a', hoverBackgroundColor: '#0e9e4a', }] }; var myBarChart = new Chart(bar, { type: 'bar', data: data1, options: { barValueSpacing: 20 } }); }); </script>Tengo un gráfico de barras simple, pero aquí hay una captura de pantalla del comportamiento actual, muy confundido sobre cómo este gráfico muestra que tiene ambos conjuntos de datos, pero solo mostrará el conjunto de datos más grande.
Terminé encontrando las opciones necesarias en otra publicación de Chart JS, esto es lo que me faltaba.
var myBarChart = new Chart(bar, { type: 'bar', data: data1, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });Parece que "beginAtZero" es lo que faltaba. Esto ahora funciona como se esperaba.