CODEWITHSUNDEEP
javascriptchart.js
Ankit
Ankit

Reputation: 121

chart.js is not visible on blank data

I want to show the graph even with no data. In that case x-axis and y-axis show be visible. Here is the code I've used. How can I get the graph visible even with no data.

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
    <style type="text/css">

    </style>

</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        const ctx = document.getElementById('myChart');
        var barChart = new Chart(ctx,{
            type: 'line',
            data:{
                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: 'single',
                    mode: 'label'
                },
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                            gridLines: {
                                display:false
                            }
                        }],
                    yAxes: [{
                            gridLines: {
                                display:false
                            }

                        }]
                }
            }
        });
    </script>
</body>

Upvotes: 0

Views: 2051

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

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>

Upvotes: 3

Related Questions