Chartjs-Chart.js is not visible on blank data

by

3👍

✅

If you only want to show the graph then, there’s no need to set the gridLines option. It is shown by default.

Also, there’s no labels in the data object hence, the grid-lines are not shown properly.

Here’s the fixed version:

const ctx = document.getElementById('myChart');
var barChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5, 6],
        datasets: [{
            fill: false,
            lineTension: 0.1,
            backgroundColor: "#22a7f0",
            borderColor: "#22a7f0",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 40,
            data: []
        }]
    },
    options: {
        legend: {
            display: false
        },
        tooltips: {
            enabled: true,
            mode: 'label'
        },
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 500
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment