Linear scale has proper padding in both vertical and horizontal orientations. Should...

diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js
index 8ab840eb99c1fc6a91a25f1da68760b1932b6c4d..c9827e02ef094902a8f6b66b7ae9bd2ff06f27cd 100644 (file)
--- a/src/scales/scale.linear.js
+++ b/src/scales/scale.linear.js
@@ -166,10 +166,14 @@
                        var range = this.end - this.start;
 
                        if (this.isHorizontal()) {
-                               pixel = this.left + (this.width / range * (value - this.start));
+                               var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+                               pixel = this.left + (innerWidth / range * (value - this.start));
+                               pixel += this.paddingLeft;
                        } else {
                                // Bottom - top since pixels increase downard on a screen
-                               pixel = this.bottom - (this.height / range * (value - this.start));
+                               var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+                               pixel = this.bottom - (innerHeight / range * (value - this.start));
+                               pixel += this.paddingTop;
                        }
 
                        return pixel;
@@ -343,7 +347,7 @@
                // @param {number} maxWidth : the max width the axis can be
                // @param {number} maxHeight: the max height the axis can be
                // @return {object} minSize : the minimum size needed to draw the axis
-               fit: function(maxWidth, maxHeight) {
+               fit: function(maxWidth, maxHeight, margins) {
                        this.calculateRange();
                        this.generateTicks(maxWidth, maxHeight);
                        this.buildLabels();
@@ -386,6 +390,10 @@
                                minSize.height = maxHeight; // fill all the height
                        }
 
+                       this.paddingLeft = 0;
+                       this.paddingRight = 0;
+                       this.paddingTop = 0;
+                       this.paddingBottom = 0;
 
 
                        if (this.options.labels.show && this.options.display) {
@@ -398,6 +406,16 @@
                                        var maxLabelHeight = maxHeight - minSize.height;
                                        var labelHeight = 1.5 * this.options.labels.fontSize;
                                        minSize.height = Math.min(maxHeight, minSize.height + labelHeight);
+
+                                       var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
+                                       this.ctx.font = labelFont;
+
+                                       var firstLabelWidth = this.ctx.measureText(this.labels[0]).width;
+                                       var lastLabelWidth = this.ctx.measureText(this.labels[this.labels.length - 1]).width;
+
+                                       // Ensure that our labels are always inside the canvas
+                                       this.paddingLeft = firstLabelWidth / 2;
+                                       this.paddingRight = lastLabelWidth / 2;
                                } else {
                                        // A vertical axis is more constrained by the width. Labels are the dominant factor 
                                        // here, so get that length first
@@ -407,13 +425,29 @@
                                        if (largestTextWidth < maxLabelWidth) {
                                                // We don't need all the room
                                                minSize.width += largestTextWidth;
+                                               minSize.width += 3; // extra padding
                                        } else {
                                                // Expand to max size
                                                minSize.width = maxWidth;
                                        }
+
+                                       this.paddingTop = this.options.labels.fontSize / 2;
+                                       this.paddingBottom = this.options.labels.fontSize / 2;
                                }
                        }
 
+                       if (margins) {
+                               this.paddingLeft -= margins.left;
+                               this.paddingTop -= margins.top;
+                               this.paddingRight -= margins.right;
+                               this.paddingBottom -= margins.bottom;
+
+                               this.paddingLeft = Math.max(this.paddingLeft, 0);
+                               this.paddingTop = Math.max(this.paddingTop, 0);
+                               this.paddingRight = Math.max(this.paddingRight, 0);
+                               this.paddingBottom = Math.max(this.paddingBottom, 0);
+                       }
+
                        this.width = minSize.width;
                        this.height = minSize.height;
                        return minSize;