[Chartjs]-Chart js display empty plot

by

8👍

Edit: I edited the post to show horizontal lines of an empty graph as @zazu asked for it

In this sample, I set up a Chart.js line graph, providing a first dataset with data (in order to scale the grid vertical axis and make the horizontal lines visible), and a second one with empty data. This results in an empty graph, but with the full grid visible:

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    // invisible dataset
    {
        label: "",
        fillColor: "rgba(220,220,220,0.0)",
        strokeColor: "rgba(220,220,220,0)",
        pointColor: "rgba(220,220,220,0)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        // change this data values according to the vertical scale
        // you are looking for 
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    // your real chart here
    {
        label: "My dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: []
    }
]
};

var options = {
    animation: false,
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,
    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,
    showTooltips: false
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JSFiddle here.

Leave a comment