Add support for mirror option

diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md
index 49b39a7ccb72fd74fb63c33839ce5dd93ba5b93e..a678a46d660b8dbd7d90edaf90b1278ce26db59b 100644 (file)
--- a/docs/00-Getting-Started.md
+++ b/docs/00-Getting-Started.md
@@ -364,6 +364,12 @@ the following options.
     labels: {
         // Boolean - if true show labels
         show: true,
+        
+        // Boolean - if true the chart will mirror the axis labels. If the labels are on the left, mirroring the axis will render them to the right
+        mirror: false,
+        
+        // Number - controls the padding between the label and the axis
+        padding: 10,
 
         // String - template string for labels
         template: "<%=value%>",

diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js
index ceeae97c1487984b9de4494cf35a7fb3db6a624c..8ab840eb99c1fc6a91a25f1da68760b1932b6c4d 100644 (file)
--- a/src/scales/scale.linear.js
+++ b/src/scales/scale.linear.js
@@ -28,11 +28,13 @@
                // label settings
                labels: {
                        show: true,
+                       mirror: false,
+                       padding: 10,
                        template: "<%=value.toLocaleString()%>",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontColor: "#666",
-                       fontFamily: "Helvetica Neue",
+                       fontFamily: "Helvetica Neue"
                }
        };
 
@@ -548,12 +550,22 @@
                                                var labelStartX;
 
                                                if (this.options.position == "left") {
-                                                       labelStartX = this.right - 10;
-                                                       this.ctx.textAlign = "right";
+                                                       if (this.options.labels.mirror) {
+                                                               labelStartX = this.right + this.options.labels.padding;
+                                                               this.ctx.textAlign = "left";
+                                                       } else {
+                                                               labelStartX = this.right - this.options.labels.padding;
+                                                               this.ctx.textAlign = "right";
+                                                       }
                                                } else {
                                                        // right side
-                                                       labelStartX = this.left + 5;
-                                                       this.ctx.textAlign = "left";
+                                                       if (this.options.labels.mirror) {
+                                                               labelStartX = this.left - this.options.labels.padding;
+                                                               this.ctx.textAlign = "right";
+                                                       } else {
+                                                               labelStartX = this.left + this.options.labels.padding;
+                                                               this.ctx.textAlign = "left";
+                                                       }
                                                }
 
                                                this.ctx.textBaseline = "middle";