Chartjs yAxes not rendering ticks

Question

I have a bar chart with dynamic data. The chart is rendering but the yAxes ticks are not.

<canvas id="statusCount" width="400" height="400"></canvas>
<script>
    const statusColors = {
        success: 'rgba(75, 192, 192, 0.2)',
        error: 'rgba(255, 99, 132, 0.2)'
    }
    const borderColors = {
        success: 'rgba(75, 192, 192, 1)',
        error: 'rgba(255, 99, 132, 1)'
    }
    var ctx = document.getElementById('statusCount').getContext('2d');
    fetch("http://localhost:3000/analytics/status-count?client=ClientName")
        .then(response => response.json())
        .then(data => {
            const dataSets = data.aggregations.status.buckets.map(el => {
                return {
                    label: el.key, 
                    data: [el.doc_count], 
                    backgroundColor: statusColors[el.key],
                    borderColor: borderColors[el.key],
                    borderWidth: 1
                }
            })
            console.log(JSON.stringify(dataSets))
        const statusCount = new Chart(ctx, {
            type: 'bar',
            data: { 
                labels: ['Status'],
                datasets: dataSets 
                },
            options: {
                title: {
                    display: true,
                    text: 'Success/Error Distribution'
                },
                scales: {
                    yAxes: [
                        {
                            // scaleLabel: {
                            //     display: true,
                            //     labelString: 'Count (#)'
                            // },
                            ticks: {
                                min: 0
                            }
                        }
                    ]
                }
            }
        });
    })

This is the data obj I'm using to build the chart.

[
  {
    "label":"success",
    "data":[16848],
    "backgroundColor":"rgba(75, 192, 192, 0.2)",
    "borderColor":"rgba(75, 192, 192, 1)",
    "borderWidth":1
  },
  {
    "label":"error",
    "data":[258],
    "backgroundColor":"rgba(255, 99, 132, 0.2)",
    "borderColor":"rgba(255, 99, 132, 1)",
    "borderWidth":1
  }
]

Answer 1

try adding this:

ticks: {
    autoSkip: false
}

to both 'yAxes' and 'xAxes'.