Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not drawing null values using chart.js

Tags:

chart.js

I'm using Chart.js to draw a chart.. My dataset have some null values, Actually chart.js plot a line between points that are previous and successor of the null values in this way :

enter image description here

The red arrow indicate where are the null values

I want to find how can I not plot these null values enter image description here

The configuration I use is as simple as that :

var lineChartData = {
            "datasets": [{
                "label": "defi score",
                "data": data,
                "pointStrokeColor": "#fff",
                "fillColor": "rgba(220,220,220,0.5)",
                "pointColor": "rgba(220,220,220,1)",
                "strokeColor": "rgba(220,220,220,1)",
            }],
            "labels": labels
        };


        var ctx = document.getElementById("chart_per_week").getContext("2d");
        var myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true,
            scaleFontColor: "#FF5972",
            bezierCurve: false
        });

Thank you for your help

like image 234
Mohamed Taboubi Avatar asked Dec 29 '15 17:12

Mohamed Taboubi


1 Answers

In case you still reach this page, New version supports skipping missing data. . If you want the lines to be connected by skipping missing data, you can set spanGaps: true in the options.

Then if you have null or NaN for missing data, it will skip it and connect to the next point.

.....
 showTooltips: true,
        options: {
             spanGaps: true,
  ......

Documentation here

like image 114
Selay Avatar answered Nov 08 '22 13:11

Selay