I am using chart.js .Bar() charts.
However, on some conditions there may be no data in the system. Short of creating empty (dummy) datasets, can I somehow make chartjs draw an empty plot?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With