MVC - Chart.js - Change interval to the whole number and start with 0

Watch this example on YouTube

1. To create simple chart 

https://www.youtube.com/watch?v=prkjQ1bFcE0&feature=emb_logo

 

2. To ensure it starts with 0 and interval is a whole number replace

 <script>
    var c = document.getElementById("barChart");
    var ctx = c.getContext("2d");
    var tData = $.getValues("/Home/BarChartData");
    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: tData,
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false,
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                    }

                }]
            }
        }
    });
</script>

with

 <script>
    var c = document.getElementById("barChart");
    var ctx = c.getContext("2d");
    var tData = $.getValues("/Home/BarChartData");
    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: tData,
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false,
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                    },
                    ticks: {
                        beginAtZero: true,
                        callback: function (value) { if (value % 1 === 0) return value; }
                    }
                }]
            }
        }
    });
</script>