Use ticks.maxTicksLimit to limit gridlines (fixes #1859); use getValueOrDefault for...

diff --git a/docs/01-Scales.md b/docs/01-Scales.md
index 9af33818b9ca9a56adebc7d1b601c84703582fc3..65a54858a4bcedc77f0ba700e5ab977d3baa4457 100644 (file)
--- a/docs/01-Scales.md
+++ b/docs/01-Scales.md
@@ -53,6 +53,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.fontStyle | String | "normal" | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 *ticks*.maxRotation | Number | 90 | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
 *ticks*.minRotation | Number |  20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary.  *Note: Only applicable to horizontal scales.*
+*ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show.
 *ticks*.padding | Number | 10 | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.*
 *ticks*.mirror | Boolean | false | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
 *ticks*.reverse | Boolean | false | Reverses order of tick labels.
@@ -259,7 +260,7 @@ The radial linear scale extends the core scale class with the following tick tem
                //Number - The backdrop padding to the side of the label in pixels
                backdropPaddingX: 2,
 
-               //Number - Limit the maximum number of ticks
+               //Number - Limit the maximum number of ticks and gridlines
                maxTicksLimit: 11,
        },
 

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index acee9222b8598c75c0ae24dabc8b03631a759f66..0e5c921fd618cf19fbe9befcccc05172627d8d49 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -432,6 +432,27 @@
                                var scaleLabelY;
                                var useAutoskipper = this.options.ticks.autoSkip;
 
+
+                               // figure out the maximum number of gridlines to show
+                               var maxTicks;
+
+                               if (this.isHorizontal()) {
+                                       maxTicks = Math.min(
+                                               helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
+                                               Math.ceil(this.width / 50)
+                                       );
+                               } else {
+                                       // The factor of 2 used to scale the font size has been experimentally determined.
+                                       maxTicks = Math.min(
+                                               helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
+                                               Math.ceil(this.height / (2 * this.options.ticks.fontSize))
+                                       );
+                               }
+
+                               // Make sure we always have at least 2 ticks 
+                               maxTicks = Math.max(2, maxTicks);
+
+
                                // Make sure we draw text in the correct color and font
                                this.ctx.fillStyle = this.options.ticks.fontColor;
                                var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
@@ -454,6 +475,17 @@
                                        if (!useAutoskipper) {
                                                skipRatio = false;
                                        }
+
+                                       // if they defined a max number of ticks, 
+                                       // increase skipRatio until that number is met
+                                       if (maxTicks) {
+                                               while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
+                                                       if (!skipRatio) {
+                                                               skipRatio = 1;
+                                                       }
+                                                       skipRatio += 1;
+                                               }
+                                       }
                                        
                                        helpers.each(this.ticks, function(label, index) {
                                                // Blank ticks

diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js
index 3adfd8bd585dc007b43c7f79284a507c47f3f6df..42c55332004f6293423421ddf342478e5f8e177e 100644 (file)
--- a/src/scales/scale.linear.js
+++ b/src/scales/scale.linear.js
@@ -159,12 +159,16 @@
                        var maxTicks;
 
                        if (this.isHorizontal()) {
-                               maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-                                                   Math.ceil(this.width / 50));
+                                       maxTicks = Math.min(
+                                               helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
+                                               Math.ceil(this.width / 50)
+                                       );
                        } else {
-                               // The factor of 2 used to scale the font size has been experimentally determined.
-                               maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-                                                   Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
+                                       // The factor of 2 used to scale the font size has been experimentally determined.
+                                       maxTicks = Math.min(
+                                               helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
+                                               Math.ceil(this.height / (2 * this.options.ticks.fontSize))
+                                       );
                        }
 
                        // Make sure we always have at least 2 ticks