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?
5
-
can you provide an example of what you have done so farQuince– Quince2014-12-15 13:44:49 +00:00Commented Dec 15, 2014 at 13:44
-
how can I create an empty grid chart for line chart?iamawebgeek– iamawebgeek2015-08-29 14:42:46 +00:00Commented Aug 29, 2015 at 14:42
-
@zazu Have you tried giving chart.js an empty array as data ? Does it suit your needs ?bviale– bviale2015-08-31 13:46:41 +00:00Commented Aug 31, 2015 at 13:46
-
@bviale nothing is renderediamawebgeek– iamawebgeek2015-08-31 13:54:17 +00:00Commented Aug 31, 2015 at 13:54
-
@zazu see if it renders something with the jsfiddle in my answerbviale– bviale2015-08-31 14:04:31 +00:00Commented Aug 31, 2015 at 14:04
Add a comment
|
2 Answers
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.
6 Comments
iamawebgeek
I also need horizontal lines in the grid. I do not see them here.
iamawebgeek
this is great! Much better than the answer I have already found myself. I used the scale (this is responsible for grid lines) to draw such graph.
iamawebgeek
The solution was so easy I am even a bit frustrated that I have bidden so much :))
bviale
Easy but not beautiful, it looks like a hack, maybe it was possible to do better by creating a new type of graph... If you have time and you look for a better solution I recommend you to look for overriding line chart
Jorrex
how do I force the Y-axis to have values going from 0 to 100 by manipulating the data?
|
If you're fetching data from API, you can handle it as follows:
if (res.data) {
chartData = {
labels: getChartLabels(res.data),
datasets: [
//set your data set
],
};
//other assignments
} else {
chartData.datasets.forEach((item) => (item.data = []));
}
It'll empty the dataset's data list when there are no records.
Update
In my case, I had to initialize the empty state of chartData. Something like this:
const powerChartData = {
labels: [],
datasets: [
{
label: "Max",
backgroundColor: "#0086C9",
borderColor: "#0086C9",
data: [],
fill: false,
},
{
label: "Average",
backgroundColor: "#32D583",
borderColor: "#32D583",
data: [],
fill: false,
},
],
};
Later, I just need to fill in powerChartData.datasets[].data
