Fix #2574 - Add support to hide border on the chart

diff --git a/docs/01-Scales.md b/docs/01-Scales.md
index 19977e532c18febfcde452d32e2397a3c98cf6fd..c7b2742bb00f10fd1d9e6ac21b3ab3d431f5d963 100644 (file)
--- a/docs/01-Scales.md
+++ b/docs/01-Scales.md
@@ -34,6 +34,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *gridLines*.display | Boolean | true |
 *gridLines*.color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
 *gridLines*.lineWidth | Number | 1 | Stroke width of grid lines
+*gridLines*.drawBorder | Boolean | true | If true draw border on the edge of the chart
 *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.
@@ -53,7 +54,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.fontFamily | String | "Helvetica Neue" | Font family for the tick labels, follows CSS font-family options.
 *ticks*.fontSize | Number | 12 | Font size for the tick labels.
 *ticks*.fontStyle | String | "normal" | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
-*ticks*.minRotation | Number | 0 | Minimum rotation for tick labels 
+*ticks*.minRotation | Number | 0 | Minimum rotation for tick labels
 *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. If not defined, it will limit to 11 ticks but will show all gridlines.
@@ -64,7 +65,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.display | Boolean | true | If true, show the ticks.
 *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value.
 *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.
-*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. 
+*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value.
 *ticks*.max | Number | - | User defined maximum number for the scale, overrides maximum value
 *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
 *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 24d3c1bfe99fbd76e791e176de7e120261317dfd..e53265ed5c6d13fe2e81539c24ce683b4b081100 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -13,6 +13,7 @@ module.exports = function(Chart) {
                        display: true,
                        color: "rgba(0, 0, 0, 0.1)",
                        lineWidth: 1,
+                       drawBorder: true,
                        drawOnChartArea: true,
                        drawTicks: true,
                        tickMarkLength: 10,
@@ -690,29 +691,31 @@ module.exports = function(Chart) {
                                }
                        }
 
-                       // Draw the line at the edge of the axis
-                       context.lineWidth = gridLines.lineWidth;
-                       context.strokeStyle = gridLines.color;
-                       var x1 = this.left,
-                               x2 = this.right,
-                               y1 = this.top,
-                               y2 = this.bottom;
+                       if (gridLines.drawBorder) {
+                               // Draw the line at the edge of the axis
+                               context.lineWidth = gridLines.lineWidth;
+                               context.strokeStyle = gridLines.color;
+                               var x1 = this.left,
+                                       x2 = this.right,
+                                       y1 = this.top,
+                                       y2 = this.bottom;
 
-                       var aliasPixel = helpers.aliasPixel(context.lineWidth);
-                       if (this.isHorizontal()) {
-                               y1 = y2 = options.position === 'top' ? this.bottom : this.top;
-                               y1 += aliasPixel;
-                               y2 += aliasPixel;
-                       } else {
-                               x1 = x2 = options.position === 'left' ? this.right : this.left;
-                               x1 += aliasPixel;
-                               x2 += aliasPixel;
-                       }
+                               var aliasPixel = helpers.aliasPixel(context.lineWidth);
+                               if (this.isHorizontal()) {
+                                       y1 = y2 = options.position === 'top' ? this.bottom : this.top;
+                                       y1 += aliasPixel;
+                                       y2 += aliasPixel;
+                               } else {
+                                       x1 = x2 = options.position === 'left' ? this.right : this.left;
+                                       x1 += aliasPixel;
+                                       x2 += aliasPixel;
+                               }
 
-                       context.beginPath();
-                       context.moveTo(x1, y1);
-                       context.lineTo(x2, y2);
-                       context.stroke();
+                               context.beginPath();
+                               context.moveTo(x1, y1);
+                               context.lineTo(x2, y2);
+                               context.stroke();
+                       }
                }
        });
 };

diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js
index 3815620e77bcecf19b181ef29f717c083b4b2ac7..de06e294decf24897bb1508010429dd46f7c121e 100644 (file)
--- a/test/core.helpers.tests.js
+++ b/test/core.helpers.tests.js
@@ -215,6 +215,7 @@ describe('Core helper tests', function() {
 
                                        gridLines: {
                                                color: "rgba(0, 0, 0, 0.1)",
+                                               drawBorder: true,
                                                drawOnChartArea: true,
                                                drawTicks: true, // draw ticks extending towards the label
                                                tickMarkLength: 10,
@@ -248,6 +249,7 @@ describe('Core helper tests', function() {
 
                                        gridLines: {
                                                color: "rgba(0, 0, 0, 0.1)",
+                                               drawBorder: true,
                                                drawOnChartArea: true,
                                                drawTicks: true, // draw ticks extending towards the label,
                                                tickMarkLength: 10,

diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js
index a58e89afdb64ff87ba7672e613dc831e92ff27b5..c717b684f848e6c564a2dfb8af5dc85c76e77a4b 100644 (file)
--- a/test/scale.category.tests.js
+++ b/test/scale.category.tests.js
@@ -14,6 +14,7 @@ describe('Category scale tests', function() {
 
                        gridLines: {
                                color: "rgba(0, 0, 0, 0.1)",
+                               drawBorder: true,
                                drawOnChartArea: true,
                                drawTicks: true, // draw ticks extending towards the label
                                tickMarkLength: 10,

diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js
index 7e572dcdcaf9753a96f7035c32539d6db3409a2c..ba37d5ef508ab2f60207db4b648cd6f133564614 100644 (file)
--- a/test/scale.linear.tests.js
+++ b/test/scale.linear.tests.js
@@ -25,6 +25,7 @@ describe('Linear Scale', function() {
 
                        gridLines: {
                                color: "rgba(0, 0, 0, 0.1)",
+                               drawBorder: true,
                                drawOnChartArea: true,
                                drawTicks: true, // draw ticks extending towards the label
                                tickMarkLength: 10,

diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js
index 6c3724c7da4e3041caf657d3ab087f1d0276f18a..dc75480bb411691e6fa48577cc99426a46b62b8e 100644 (file)
--- a/test/scale.logarithmic.tests.js
+++ b/test/scale.logarithmic.tests.js
@@ -20,6 +20,7 @@ describe('Logarithmic Scale tests', function() {
                        display: true,
                        gridLines: {
                                color: "rgba(0, 0, 0, 0.1)",
+                               drawBorder: true,
                                drawOnChartArea: true,
                                drawTicks: true,
                                tickMarkLength: 10,

diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js
index b1848c77ff936e424cf37c49770e9b09c900ab76..d7b61695eb2067c05c1ceaa15c7d227fd33d5d90 100644 (file)
--- a/test/scale.radialLinear.tests.js
+++ b/test/scale.radialLinear.tests.js
@@ -30,6 +30,7 @@ describe('Test the radial linear scale', function() {
                        display: true,
                        gridLines: {
                                color: "rgba(0, 0, 0, 0.1)",
+                               drawBorder: true,
                                drawOnChartArea: true,
                                drawTicks: true,
                                tickMarkLength: 10,

diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js
index 546d4564d8a912c27348514c2c891a3010c636b1..9966f9cc0f0f3123cde19641868a087e4aa51013 100644 (file)
--- a/test/scale.time.tests.js
+++ b/test/scale.time.tests.js
@@ -47,6 +47,7 @@ describe('Time scale tests', function() {
                        display: true,
                        gridLines: {
                                color: "rgba(0, 0, 0, 0.1)",
+                               drawBorder: true,
                                drawOnChartArea: true,
                                drawTicks: true,
                                tickMarkLength: 10,