MVC - Chart.js - Remove grid lines

Watch this example on YouTube

 

1. To create simple chart 

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

2. To remove grid lines 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
    });
</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,
                    }
                }]
            }
        }
    });
</script>