diff --git a/docs/01-Scales.md b/docs/01-Scales.md index 9af33818b..65a54858a 100644 --- 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 acee9222b..0e5c921fd 100644 --- 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 3adfd8bd5..42c553320 100644 --- 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