Js chart displays empty chart

Question

I am using chart.js.Bar () charts.

However, under certain conditions, there can be no data in the system. If I don’t create empty (dummy) data sets, can I somehow make the diagrams draw an empty plot?

Answer 1

Edit: I edited the post to show the horizontal rows of an empty graph, as @zazu asked him to

In this example, I set the chart chart Chart.js, providing the first data set with data (to scale the vertical axis of the grid and display horizontal lines), and the second with empty data. This leads to an empty diagram, but with a 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 .