Chart JS Displays Only Bigger Dataset But Has Both Datasets?

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error Chart JS Displays Only Bigger Dataset But Has Both Datasets? on this date .

fairly new to JS and I have a strange issue with chart JS bar chart.

<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>

I have a simplke bar chart, but here is a screen shot of current behavior, super confused how this chart shows it has both datasets but will only display the larger dataset?

Bar Chart

Answer

Ended up finding the options needed in another Chart JS post, this is what I was missing.

    var myBarChart = new Chart(bar, {
        type: 'bar',
        data: data1,
        options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
    });

It appears he “beginAtZero” is what was missing. This now works as expected.