Category scale filter function will hide the grid line if `null` or `undefined` returned.

diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md
index 83b3cf691d4ee123767c98ee5dfce001070430a7..5aeac0a1bd55cba930934dc444668d5b7b4a4fb8 100644 (file)
--- a/docs/00-Getting-Started.md
+++ b/docs/00-Getting-Started.md
@@ -403,6 +403,9 @@ The `userCallback` method may be useful when there are a lot of labels. The foll
         xAxes: [{
             labels: {
                 maxRotation: 0,    // set maxRotation to 0 to turn off auto-rotation
+
+                // Return an empty string to draw the grid line but hide the label
+                // Return `null` or `undefined` to hide the grid line
                 userCallback: function(labelString, index) {
                     return (index % 5 === 0) ? labelString : '';
                 }

diff --git a/samples/line-x-axis-filter.html b/samples/line-x-axis-filter.html
index 3b5b82f280ab055527ace4152482ad14717034f3..71a1b8844a3d63022e04518c0a3fd71c5626c6c3 100644 (file)
--- a/samples/line-x-axis-filter.html
+++ b/samples/line-x-axis-filter.html
@@ -55,7 +55,7 @@
                     display: true,
                     labels: {
                         userCallback: function(dataLabel, index) {
-                            return index % 2 === 0 ? dataLabel : '';
+                            return index % 2 === 0 ? dataLabel : null;
                         }
                     }
                 }],

diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index d97699c1f3dc2b7526e7ef78db5eb93e4bc155a2..7912f8dcb06ca7497155f19a2c2086d0a5a19960 100644 (file)
--- a/src/scales/scale.category.js
+++ b/src/scales/scale.category.js
@@ -230,7 +230,8 @@
                     }
 
                     helpers.each(this.labels, function(label, index) {
-                        if (skipRatio > 1 && index % skipRatio > 0) {
+                        // Blank labels
+                        if ((skipRatio > 1 && index % skipRatio > 0) || (label === undefined || label === null)) {
                             return;
                         }
                         var xLineValue = this.getPixelForValue(label, index, null, false); // xvalues for grid lines