From 58d18d6a480062bc3083d68848af0a64280c3941 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 16 Apr 2016 21:46:29 -0400 Subject: [PATCH 1/3] Add configurable tick mark length. Use it to calculate appropriate sizing --- src/core/core.scale.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 18c201eea..24881e128 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -14,6 +14,7 @@ module.exports = function(Chart) { lineWidth: 1, drawOnChartArea: true, drawTicks: true, + tickMarkLength: 10, zeroLineWidth: 1, zeroLineColor: "rgba(0,0,0,0.25)", offsetGridLines: false @@ -271,12 +272,12 @@ module.exports = function(Chart) { // subtract the margins to line up with the chartArea if we are a full width scale this.minSize.width = this.isFullWidth() ? this.maxWidth - this.margins.left - this.margins.right : this.maxWidth; } else { - this.minSize.width = this.options.gridLines.display && this.options.display ? 10 : 0; + this.minSize.width = this.options.gridLines.tickMarkLength; } // height if (this.isHorizontal()) { - this.minSize.height = this.options.gridLines.display && this.options.display ? 10 : 0; + this.minSize.height = this.options.gridLines.tickMarkLength; } else { this.minSize.height = this.maxHeight; // fill all the height } @@ -451,6 +452,7 @@ module.exports = function(Chart) { var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle); var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily); var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + var tl = this.options.gridLines.tickMarkLength; var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor); var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize); @@ -468,8 +470,8 @@ module.exports = function(Chart) { if (this.isHorizontal()) { setContextLineSettings = true; - var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - 10; - var yTickEnd = this.options.position === "bottom" ? this.top + 10 : this.bottom; + var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - tl; + var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom; skipRatio = false; if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { @@ -537,7 +539,7 @@ module.exports = function(Chart) { if (this.options.ticks.display) { this.ctx.save(); - this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10); + this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); this.ctx.font = tickLabelFont; this.ctx.textAlign = (isRotated) ? "right" : "center"; From fac92448ffcb6342f6cdb62b817a72b1810db024 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 16 Apr 2016 21:49:08 -0400 Subject: [PATCH 2/3] Update tests for new config option --- test/core.helpers.tests.js | 4 +++- test/scale.category.tests.js | 1 + test/scale.linear.tests.js | 1 + test/scale.logarithmic.tests.js | 1 + test/scale.radialLinear.tests.js | 1 + test/scale.time.tests.js | 1 + 6 files changed, 8 insertions(+), 1 deletion(-) diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 3721e3b41..7bc5dc3c7 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -217,6 +217,7 @@ describe('Core helper tests', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, @@ -246,7 +247,8 @@ describe('Core helper tests', function() { gridLines: { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, - drawTicks: true, // draw ticks extending towards the label + drawTicks: true, // draw ticks extending towards the label, + tickMarkLength: 10 lineWidth: 1, offsetGridLines: false, display: true, diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index 47645fe23..7807d05c7 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -16,6 +16,7 @@ describe('Category scale tests', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index 1de340d4e..3236949b1 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -15,6 +15,7 @@ describe('Linear Scale', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index 6f2866237..a75f174e1 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -14,6 +14,7 @@ describe('Logarithmic Scale tests', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 566e61b6a..c7d05e295 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -20,6 +20,7 @@ describe('Test the radial linear scale', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index 244daff63..c35b4cea3 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -40,6 +40,7 @@ describe('Time scale tests', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true, From ca461479a882b680529f60cb260a459aa7b063d8 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 16 Apr 2016 21:50:45 -0400 Subject: [PATCH 3/3] Update docs --- docs/01-Scales.md | 1 + test/core.helpers.tests.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/01-Scales.md b/docs/01-Scales.md index e7a84ddab..68737b6e0 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -35,6 +35,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *gridLines*.lineWidth | Number | 1 | Stroke width of grid lines *gridLines*.drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn *gridLines*.drawTicks | Boolean | true | If true, draw lines beside the ticks in the axis area beside the chart. +*gridLines*.tickMarkLength | Number | 10 | Length in pixels that the grid lines will draw into the axis area. *gridLines*.zeroLineWidth | Number | 1 | Stroke width of the grid line for the first index (index 0). *gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Stroke color of the grid line for the first index (index 0). *gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines. diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 7bc5dc3c7..9638a373a 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -248,7 +248,7 @@ describe('Core helper tests', function() { color: "rgba(0, 0, 0, 0.1)", drawOnChartArea: true, drawTicks: true, // draw ticks extending towards the label, - tickMarkLength: 10 + tickMarkLength: 10, lineWidth: 1, offsetGridLines: false, display: true,