]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Updated core.scale draw code with minor improvements and features that broke during...
authorEvert Timberg <evert.timberg@gmail.com>
Sat, 26 Sep 2015 01:04:45 +0000 (21:04 -0400)
committerEvert Timberg <evert.timberg@gmail.com>
Sat, 26 Sep 2015 01:04:45 +0000 (21:04 -0400)
src/core/core.scale.js
src/core/core.scaleService.js
src/scales/scale.linear.js
src/scales/scale.logarithmic.js
test/scale.linear.tests.js
test/scale.logarithmic.tests.js

index b2d5823b256cdc4df502a6f14671eacfa6951700..6835effacafadc8153a0f582571e99f8268837b7 100644 (file)
 
                // label settings
                ticks: {
-                       show: true,
-                       minRotation: 20,
-                       maxRotation: 90,
-                       template: "<%=value%>",
+                       beginAtZero: false,
                        fontSize: 12,
                        fontStyle: "normal",
                        fontColor: "#666",
                        fontFamily: "Helvetica Neue",
+                       maxRotation: 90,
+                       minRotation: 20,
+                       mirror: false,
+                       padding: 10,
+                       reverse: false,
+                       show: true,
+                       template: "<%=value%>",
                },
        };
 
                        } else {
                                this.height = this.maxHeight;
                        }
+
+                       // Reset padding
+                       this.paddingLeft = 0;
+                       this.paddingTop = 0;
+                       this.paddingRight = 0;
+                       this.paddingBottom = 0;
                },
                afterSetDimensions: helpers.noop,
 
                 }
             }
 
-                       this.paddingLeft = 0;
-                       this.paddingRight = 0;
-                       this.paddingTop = 0;
-                       this.paddingBottom = 0;
-
                        if (this.options.ticks.show && this.options.display) {
                                // Don't bother fitting the ticks if we are not showing them
                                var labelFont = helpers.fontString(this.options.ticks.fontSize,
                                        var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
 
                                        // Ensure that our ticks are always inside the canvas
-                                       this.paddingLeft = firstLabelWidth / 2;
-                                       this.paddingRight = lastLabelWidth / 2;
+                                       var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
+                                       this.paddingLeft = (cosRotation * firstLabelWidth) / 2 + 3; // add 3 px to move away from canvas edges
+                                       this.paddingRight = (cosRotation * lastLabelWidth) / 2 + 3;
                                } else {
                                        // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
                                        var maxLabelWidth = this.maxWidth - this.minSize.width;
                },
                afterFit: helpers.noop,
 
-
-
-
-
-
                // Shared Methods
                isHorizontal: function() {
                        return this.options.position == "top" || this.options.position == "bottom";
                        if (this.options.display) {
 
                                var setContextLineSettings;
-                               var isRotated;
+                               var isRotated = this.labelRotation !== 0;
                                var skipRatio;
                                var scaleLabelX;
                                var scaleLabelY;
                                        setContextLineSettings = true;
                                        var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10;
                                        var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom;
-                                       isRotated = this.labelRotation !== 0;
                                        skipRatio = false;
 
                                        if ((this.options.ticks.fontSize + 4) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
 
                                } else {
                                        setContextLineSettings = true;
-                                       var xTickStart = this.options.position == "left" ? this.right : this.left - 10;
-                                       var xTickEnd = this.options.position == "left" ? this.right + 10 : this.left;
-                                       isRotated = this.labelRotation !== 0;
-                                       //skipRatio = false;
-
-                                       // if ((this.options.ticks.fontSize + 4) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
-                                       //      skipRatio = 1 + Math.floor(((this.options.ticks.fontSize + 4) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
-                                       // }
+                                       var xTickStart = this.options.position == "right" ? this.left : this.right - 5;
+                                       var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right;
 
                                        helpers.each(this.ticks, function(label, index) {
-                                               // Blank ticks
-                                               // if ((skipRatio > 1 && index % skipRatio > 0) || (label === undefined || label === null)) {
-                                               //      return;
-                                               // }
                                                var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
-                                               var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
-                                               var xLabelValue = this.left + (this.width / 2);
 
                                                if (this.options.gridLines.show) {
                                                        if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
                                                }
 
                                                if (this.options.ticks.show) {
+                                                       var xLabelValue;
+                                                       var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
+
                                                        this.ctx.save();
+
+                                                       if (this.options.position == "left") {
+                                                               if (this.options.ticks.mirror) {
+                                                                       xLabelValue = this.right + this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "left";
+                                                               } else {
+                                                                       xLabelValue = this.right - this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "right";
+                                                               }
+                                                       } else {
+                                                               // right side
+                                                               if (this.options.ticks.mirror) {
+                                                                       xLabelValue = this.left - this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "right";
+                                                               } else {
+                                                                       xLabelValue = this.left + this.options.ticks.padding;
+                                                                       this.ctx.textAlign = "left";
+                                                               }
+                                                       }
+
+                                                       
                                                        this.ctx.translate(xLabelValue, yLabelValue);
                                                        this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
                                                        this.ctx.font = this.font;
-                                                       this.ctx.textAlign = 'center';
                                                        this.ctx.textBaseline = "middle";
                                                        this.ctx.fillText(label, 0, 0);
                                                        this.ctx.restore();
index 4b8c744832bd5db00db1bccc1d4474ccbb20f2e7..bd100fed2c5a0252c98d6d3c2ec521f90f0b9f3c 100644 (file)
@@ -19,7 +19,7 @@
                defaults: {},
                registerScaleType: function(type, scaleConstructor, defaults) {
                        this.constructors[type] = scaleConstructor;
-                       this.defaults[type] = helpers.extendDeep({}, Chart.defaults.scale, defaults);
+                       this.defaults[type] = helpers.scaleMerge(Chart.defaults.scale, defaults);
                },
                getScaleConstructor: function(type) {
                        return this.constructors.hasOwnProperty(type) ? this.constructors[type] : undefined;
index 2c9ecd4f04c3edbd4dd4bd1292b3ab0b6569665a..d522ae91cf6fe7ce972d93459b386f3ddd329e52 100644 (file)
                        // If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
                        // do nothing since that would make the chart weird. If the user really wants a weird chart
                        // axis, they can manually override it
-                       if (this.options.beginAtZero) {
+                       if (this.options.ticks.beginAtZero) {
                                var minSign = helpers.sign(this.min);
                                var maxSign = helpers.sign(this.max);
 
                        this.max = helpers.max(this.ticks);
                        this.min = helpers.min(this.ticks);
 
-                       if (this.options.reverse) {
+                       if (this.options.ticks.reverse) {
                                this.ticks.reverse();
 
                                this.start = this.max;
index 3bc3d02d4776f788323cf58652fbeac0c6817b4e..2db11bf2801c600137af42d27233bdc2663a5e08 100644 (file)
@@ -8,16 +8,8 @@
        var defaultConfig = {
                position: "left",
 
-               // scale label
-               scaleLabel: {
-                       // actual label
-                       labelString: '',
-                       // display property
-                       show: false,
-               },
-
                // label settings
-               labels: {
+               ticks: {
                        template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>",
                }
        };
                        this.max = helpers.max(this.tickValues);
                        this.min = helpers.min(this.tickValues);
 
-                       if (this.options.reverse) {
+                       if (this.options.ticks.reverse) {
                                this.tickValues.reverse();
 
                                this.start = this.max;
                                this.end = this.max;
                        }
 
-                       this.ticks = [];
-
-                       helpers.each(this.tickValues, function(tick, index, ticks) {
-                               var label;
-
-                               if (this.options.labels.userCallback) {
-                                       // If the user provided a callback for label generation, use that as first priority
-                                       label = this.options.labels.userCallback(tick, index, ticks);
-                               } else if (this.options.labels.template) {
-                                       // else fall back to the template string
-                                       label = helpers.template(this.options.labels.template, {
-                                               value: tick
-                                       });
-                               }
-
-                               this.ticks.push(label); // empty string will not render so we're good
-                       }, this);
+                       this.ticks = this.tickValues.slice();
                },
                // Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not
                getRightValue: function(rawValue) {
index 15c78e71fe1b0b3a5c3dcca17d0846619d7e36d4..52a49ef4ee96be3252fc87c3bb9fa22e134c4e5a 100644 (file)
 describe('Linear Scale', function() {
 
-               it('Should register the constructor with the scale service', function() {
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       expect(Constructor).not.toBe(undefined);
-                       expect(typeof Constructor).toBe('function');
+       it('Should register the constructor with the scale service', function() {
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               expect(Constructor).not.toBe(undefined);
+               expect(typeof Constructor).toBe('function');
+       });
+
+       it('Should have the correct default config', function() {
+               var defaultConfig = Chart.scaleService.getScaleDefaults('linear');
+               expect(defaultConfig).toEqual({
+                       display: true,
+
+                       gridLines: {
+                               color: "rgba(0, 0, 0, 0.1)",
+                               drawOnChartArea: true,
+                               drawTicks: true, // draw ticks extending towards the label
+                               lineWidth: 1,
+                               offsetGridLines: false,
+                               show: true,
+                               zeroLineColor: "rgba(0,0,0,0.25)",
+                               zeroLineWidth: 1,
+                       },
+                       position: "left",
+                       scaleLabel: {
+                               fontColor: '#666',
+                               fontFamily: 'Helvetica Neue',
+                               fontSize: 12,
+                               fontStyle: 'normal',
+                               labelString: '',
+                               show: false,
+                       },
+                       ticks: {
+                               beginAtZero: false,
+                               fontColor: "#666",
+                               fontFamily: "Helvetica Neue",
+                               fontSize: 12,
+                               fontStyle: "normal",
+                               maxRotation: 90,
+                               minRotation: 20,
+                               mirror: false,
+                               padding: 10,
+                               reverse: false,
+                               show: true,
+                               template: "<%=value%>"
+                       }
                });
+       });
 
-               it('Should have the correct default config', function() {
-                       var defaultConfig = Chart.scaleService.getScaleDefaults('linear');
-                       expect(defaultConfig).toEqual({
-                               display: true,
-                               
-                               gridLines: {
-                                       color: "rgba(0, 0, 0, 0.1)",
-                                       drawOnChartArea: true,
-                                       drawTicks: true, // draw ticks extending towards the label
-                                       lineWidth: 1,
-                                       offsetGridLines: false,
-                                       show: true,
-                                       zeroLineColor: "rgba(0,0,0,0.25)",
-                                       zeroLineWidth: 1,
-                               },
-                               position: "left",
-                               scaleLabel: {
-                                       fontColor: '#666',
-                                       fontFamily: 'Helvetica Neue',
-                                       fontSize: 12,
-                                       fontStyle: 'normal',
-                                       labelString: '',
-                                       show: false,
-                               },
-                               ticks: {
-                                       fontColor: "#666",
-                                       fontFamily: "Helvetica Neue",
-                                       fontSize: 12,
-                                       fontStyle: "normal",
-                                       maxRotation: 90,
-                                       minRotation: 20,
-                                       show: true,
-                                       template: "<%=value%>"
-                               }
-                       });
+       it('Should correctly determine the max & min data values', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, -5, 78, -100]
+                       }, {
+                               yAxisID: 'second scale',
+                               data: [-1000, 1000],
+                       }, {
+                               yAxisID: scaleID,
+                               data: [150]
+                       }]
+               };
+
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should correctly determine the max & min data values', function() {
-                       var scaleID = 'myScale';
+               expect(scale).not.toEqual(undefined); // must construct
+               expect(scale.min).toBe(undefined); // not yet set
+               expect(scale.max).toBe(undefined);
 
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, -5, 78, -100]
-                               }, {
-                                       yAxisID: 'second scale',
-                                       data: [-1000, 1000],
-                               }, {
-                                       yAxisID: scaleID,
-                                       data: [150]
-                               }]
-                       };
-
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: Chart.scaleService.getScaleDefaults('linear'), // use default config for scale
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       expect(scale).not.toEqual(undefined); // must construct
-                       expect(scale.min).toBe(undefined); // not yet set
-                       expect(scale.max).toBe(undefined);
-
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
-
-                       scale.buildTicks();
-                       expect(scale.min).toBe(-100);
-                       expect(scale.max).toBe(150);
-               });
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
 
-               it('Should correctly determine the max & min for scatter data', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       xAxisID: scaleID, // for the horizontal scale
-                                       yAxisID: scaleID,
-                                       data: [{
-                                               x: 10,
-                                               y: 100
-                                       }, {
-                                               x: -10,
-                                               y: 0
-                                       }, {
-                                               x: 0,
-                                               y: 0
-                                       }, {
-                                               x: 99,
-                                               y: 7
-                                       }]
-                               }]
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var verticalScale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       verticalScale.width = 50;
-                       verticalScale.height = 400;
-
-                       verticalScale.buildTicks();
-                       expect(verticalScale.min).toBe(0);
-                       expect(verticalScale.max).toBe(100);
-
-                       var horizontalConfig = Chart.helpers.clone(config);
-                       horizontalConfig.position = 'bottom';
-                       var horizontalScale = new Constructor({
-                               ctx: {},
-                               options: horizontalConfig,
-                               data: mockData,
-                               id: scaleID,
-                       });
-
-                       // Set arbitrary width and height for now
-                       horizontalScale.width = 400;
-                       horizontalScale.height = 50;
-
-                       horizontalScale.buildTicks();
-                       expect(horizontalScale.min).toBe(-20);
-                       expect(horizontalScale.max).toBe(100);
-               });
+               scale.buildTicks();
+               expect(scale.min).toBe(-100);
+               expect(scale.max).toBe(150);
+       });
 
-               it('Should correctly determine the min and max data values when stacked mode is turned on', function() {
-                       var scaleID = 'myScale';
+       it('Should correctly determine the max & min for scatter data', function() {
+               var scaleID = 'myScale';
 
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, -5, 78, -100]
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: [{
+                                       x: 10,
+                                       y: 100
                                }, {
-                                       yAxisID: 'second scale',
-                                       data: [-1000, 1000],
+                                       x: -10,
+                                       y: 0
                                }, {
-                                       yAxisID: scaleID,
-                                       data: [150, 0, 0, -100, -10, 9]
+                                       x: 0,
+                                       y: 0
+                               }, {
+                                       x: 99,
+                                       y: 7
                                }]
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       config.stacked = true; // enable scale stacked mode
-
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
-
-                       scale.buildTicks();
-                       expect(scale.min).toBe(-150);
-                       expect(scale.max).toBe(200);
+                       }]
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should ensure that the scale has a max and min that are not equal', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: []
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
-
-                       scale.buildTicks();
-                       expect(scale.min).toBe(-1);
-                       expect(scale.max).toBe(1);
+               // Set arbitrary width and height for now
+               verticalScale.width = 50;
+               verticalScale.height = 400;
+
+               verticalScale.buildTicks();
+               expect(verticalScale.min).toBe(0);
+               expect(verticalScale.max).toBe(100);
+
+               var horizontalConfig = Chart.helpers.clone(config);
+               horizontalConfig.position = 'bottom';
+               var horizontalScale = new Constructor({
+                       ctx: {},
+                       options: horizontalConfig,
+                       data: mockData,
+                       id: scaleID,
                });
 
-               it('should forcibly include 0 in the range if the beginAtZero option is used', function() {
-                       var scaleID = 'myScale';
+               // Set arbitrary width and height for now
+               horizontalScale.width = 400;
+               horizontalScale.height = 50;
 
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [20, 30, 40, 50]
-                               }]
-                       };
+               horizontalScale.buildTicks();
+               expect(horizontalScale.min).toBe(-20);
+               expect(horizontalScale.max).toBe(100);
+       });
+
+       it('Should correctly determine the min and max data values when stacked mode is turned on', function() {
+               var scaleID = 'myScale';
 
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, -5, 78, -100]
+                       }, {
+                               yAxisID: 'second scale',
+                               data: [-1000, 1000],
+                       }, {
+                               yAxisID: scaleID,
+                               data: [150, 0, 0, -100, -10, 9]
+                       }]
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               config.stacked = true; // enable scale stacked mode
+
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
+
+               scale.buildTicks();
+               expect(scale.min).toBe(-150);
+               expect(scale.max).toBe(200);
+       });
+
+       it('Should ensure that the scale has a max and min that are not equal', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: []
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
 
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
+               scale.buildTicks();
+               expect(scale.min).toBe(-1);
+               expect(scale.max).toBe(1);
+       });
 
-                       scale.buildTicks();
-                       expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]);
+       it('should forcibly include 0 in the range if the beginAtZero option is used', function() {
+               var scaleID = 'myScale';
 
-                       config.beginAtZero = true;
-                       scale.buildTicks();
-                       expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]);
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [20, 30, 40, 50]
+                       }]
+               };
 
-                       mockData.datasets[0].data = [-20, -30, -40, -50];
-                       scale.buildTicks();
-                       expect(scale.ticks).toEqual([0, -5, -10, -15, -20, -25, -30, -35, -40, -45, -50]);
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
 
-                       config.beginAtZero = false;
-                       scale.buildTicks();
-                       expect(scale.ticks).toEqual([-20, -25, -30, -35, -40, -45, -50]);
-               });
 
-               it('Should generate tick marks', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, 25, 78]
-                               }, ]
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
-
-                       scale.buildTicks();
-
-                       // Counts down because the lines are drawn top to bottom
-                       expect(scale.ticks).toEqual([80, 70, 60, 50, 40, 30, 20, 10, 0]);
-                       expect(scale.start).toBe(0);
-                       expect(scale.end).toBe(80);
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should generate tick marks in the correct order in reversed mode', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, 25, 78]
-                               }, ]
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       config.reverse = true;
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: {},
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       scale.width = 50;
-                       scale.height = 400;
-
-                       scale.buildTicks();
-
-                       // Reverse mode makes this count up
-                       expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]);
-                       expect(scale.start).toBe(80);
-                       expect(scale.end).toBe(0);
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
+
+               scale.buildTicks();
+               expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20]);
+
+               config.ticks.beginAtZero = true;
+               scale.buildTicks();
+               expect(scale.ticks).toEqual([50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0]);
+
+               mockData.datasets[0].data = [-20, -30, -40, -50];
+               scale.buildTicks();
+               expect(scale.ticks).toEqual([0, -5, -10, -15, -20, -25, -30, -35, -40, -45, -50]);
+
+               config.ticks.beginAtZero = false;
+               scale.buildTicks();
+               expect(scale.ticks).toEqual([-20, -25, -30, -35, -40, -45, -50]);
+       });
+
+       it('Should generate tick marks', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, 25, 78]
+                       }, ]
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should build labels using the default template', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, 25, 78]
-                               }, ]
-                       };
-
-                       var mockContext = window.createMockContext();
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Set arbitrary width and height for now
-                       scale.update(50, 400);
-                       expect(scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
+
+               scale.buildTicks();
+
+               // Counts down because the lines are drawn top to bottom
+               expect(scale.ticks).toEqual([80, 70, 60, 50, 40, 30, 20, 10, 0]);
+               expect(scale.start).toBe(0);
+               expect(scale.end).toBe(80);
+       });
+
+       it('Should generate tick marks in the correct order in reversed mode', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, 25, 78]
+                       }, ]
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               config.ticks.reverse = true;
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: {},
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should build labels using the user supplied callback', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       yAxisID: scaleID,
-                                       data: [10, 5, 0, 25, 78]
-                               }, ]
-                       };
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       config.ticks.userCallback = function(value, index) {
-                               return index.toString();
-                       };
-
-                       var mockContext = window.createMockContext();
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var scale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       scale.update(400, 400);
-
-                       // Just the index
-                       expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']);
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
+
+               scale.buildTicks();
+
+               // Reverse mode makes this count up
+               expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]);
+               expect(scale.start).toBe(80);
+               expect(scale.end).toBe(0);
+       });
+
+       it('Should build labels using the default template', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, 25, 78]
+                       }, ]
+               };
+
+               var mockContext = window.createMockContext();
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('Should get the correct pixel value for a point', function() {
-                       var scaleID = 'myScale';
-
-                       var mockData = {
-                               datasets: [{
-                                       xAxisID: scaleID, // for the horizontal scale
-                                       yAxisID: scaleID,
-                                       data: []
-                               }]
-                       };
-
-                       var mockContext = window.createMockContext();
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var verticalScale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       // Update
-                       verticalScale.update(50, 100);
-
-                       // Fake out positioning of the scale service
-                       verticalScale.left = 0;
-                       verticalScale.top = 0;
-                       verticalScale.right = 50;
-                       verticalScale.bottom = 110;
-                       verticalScale.paddingTop = 5;
-                       verticalScale.paddingBottom = 5;
-                       verticalScale.width = 50;
-                       verticalScale.height = 110;
-
-                       expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(5); // top + paddingTop
-                       expect(verticalScale.getPixelForValue(-1, 0, 0)).toBe(105); // bottom - paddingBottom
-                       expect(verticalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway
-
-                       var horizontalConfig = Chart.helpers.clone(config);
-                       horizontalConfig.position = 'bottom';
-                       var horizontalScale = new Constructor({
-                               ctx: mockContext,
-                               options: horizontalConfig,
-                               data: mockData,
-                               id: scaleID,
-                       });
-
-                       horizontalScale.update(100, 50);
-
-                       // Fake out positioning of the scale service
-                       horizontalScale.left = 0;
-                       horizontalScale.top = 0;
-                       horizontalScale.right = 110;
-                       horizontalScale.bottom = 50;
-                       horizontalScale.paddingLeft = 5;
-                       horizontalScale.paddingRight = 5;
-                       horizontalScale.width = 110;
-                       horizontalScale.height = 50;
-
-                       // Range expands to [-2, 2] due to nicenum algorithm
-                       expect(horizontalScale.getPixelForValue(2, 0, 0)).toBe(105); // right - paddingRight
-                       expect(horizontalScale.getPixelForValue(-2, 0, 0)).toBe(5); // left + paddingLeft
-                       expect(horizontalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway
+               // Set arbitrary width and height for now
+               scale.update(50, 400);
+               expect(scale.ticks).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
+       });
+
+       it('Should build labels using the user supplied callback', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               yAxisID: scaleID,
+                               data: [10, 5, 0, 25, 78]
+                       }, ]
+               };
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               config.ticks.userCallback = function(value, index) {
+                       return index.toString();
+               };
+
+               var mockContext = window.createMockContext();
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var scale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('should fit correctly', function() {
-                       var scaleID = 'myScale';
+               scale.update(400, 400);
+
+               // Just the index
+               expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8']);
+       });
+
+       it('Should get the correct pixel value for a point', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: []
+                       }]
+               };
+
+               var mockContext = window.createMockContext();
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
-                       var mockData = {
-                               datasets: [{
-                                       xAxisID: scaleID, // for the horizontal scale
-                                       yAxisID: scaleID,
-                                       data: [-5, 0, 2, -3, 5]
-                               }]
-                       };
-                       var mockContext = window.createMockContext();
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var verticalScale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       var minSize = verticalScale.update(100, 300);
-                       expect(minSize).toEqual({
-                               width: 33,
-                               height: 300,
-                       });
-                       expect(verticalScale.width).toBe(33);
-                       expect(verticalScale.height).toBe(300);
-                       expect(verticalScale.paddingTop).toBe(6);
-                       expect(verticalScale.paddingBottom).toBe(6);
-                       expect(verticalScale.paddingLeft).toBe(0);
-                       expect(verticalScale.paddingRight).toBe(0);
-
-                       // Refit with margins to see the padding go away
-                       minSize = verticalScale.update(33, 300, {
-                               left: 0,
-                               right: 0,
-                               top: 15,
-                               bottom: 3
-                       });
-                       expect(minSize).toEqual({
-                               width: 33,
-                               height: 300,
-                       });
-                       expect(verticalScale.paddingTop).toBe(0);
-                       expect(verticalScale.paddingBottom).toBe(3);
-                       expect(verticalScale.paddingLeft).toBe(0);
-                       expect(verticalScale.paddingRight).toBe(0);
-
-                       // Extra size when scale label showing
-                       config.scaleLabel.show = true;
-                       minSize = verticalScale.update(100, 300);
-                       expect(minSize).toEqual({
-                               width: 51,
-                               height: 300,
-                       });
+               // Update
+               verticalScale.update(50, 100);
+
+               // Fake out positioning of the scale service
+               verticalScale.left = 0;
+               verticalScale.top = 0;
+               verticalScale.right = 50;
+               verticalScale.bottom = 110;
+               verticalScale.paddingTop = 5;
+               verticalScale.paddingBottom = 5;
+               verticalScale.width = 50;
+               verticalScale.height = 110;
+
+               expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(5); // top + paddingTop
+               expect(verticalScale.getPixelForValue(-1, 0, 0)).toBe(105); // bottom - paddingBottom
+               expect(verticalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway
+
+               var horizontalConfig = Chart.helpers.clone(config);
+               horizontalConfig.position = 'bottom';
+               var horizontalScale = new Constructor({
+                       ctx: mockContext,
+                       options: horizontalConfig,
+                       data: mockData,
+                       id: scaleID,
                });
 
-               it('should fit correctly when horizontal', function() {
-                       var scaleID = 'myScale';
+               horizontalScale.update(100, 50);
+
+               // Fake out positioning of the scale service
+               horizontalScale.left = 0;
+               horizontalScale.top = 0;
+               horizontalScale.right = 110;
+               horizontalScale.bottom = 50;
+               horizontalScale.paddingLeft = 5;
+               horizontalScale.paddingRight = 5;
+               horizontalScale.width = 110;
+               horizontalScale.height = 50;
+
+               // Range expands to [-2, 2] due to nicenum algorithm
+               expect(horizontalScale.getPixelForValue(2, 0, 0)).toBe(105); // right - paddingRight
+               expect(horizontalScale.getPixelForValue(-2, 0, 0)).toBe(5); // left + paddingLeft
+               expect(horizontalScale.getPixelForValue(0, 0, 0)).toBe(55); // halfway
+       });
+
+       it('should fit correctly', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: [-5, 0, 2, -3, 5]
+                       }]
+               };
+               var mockContext = window.createMockContext();
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
-                       var mockData = {
-                               datasets: [{
-                                       xAxisID: scaleID, // for the horizontal scale
-                                       yAxisID: scaleID,
-                                       data: [-5, 0, 2, -3, 5]
-                               }]
-                       };
-                       var mockContext = window.createMockContext();
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       config.position = "bottom";
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var verticalScale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       var minSize = verticalScale.update(100, 300);
-                       expect(minSize).toEqual({
-                               width: 100,
-                               height: 28,
-                       });
-                       expect(verticalScale.width).toBe(100);
-                       expect(verticalScale.height).toBe(28);
-                       expect(verticalScale.paddingTop).toBe(0);
-                       expect(verticalScale.paddingBottom).toBe(0);
-                       expect(verticalScale.paddingLeft).toBe(15);
-                       expect(verticalScale.paddingRight).toBe(10);
-
-                       // Refit with margins to see the padding go away
-                       minSize = verticalScale.update(100, 28, {
-                               left: 10,
-                               right: 6,
-                               top: 15,
-                               bottom: 3
-                       });
-                       expect(minSize).toEqual({
-                               width: 100,
-                               height: 28,
-                       });
-                       expect(verticalScale.paddingTop).toBe(0);
-                       expect(verticalScale.paddingBottom).toBe(0);
-                       expect(verticalScale.paddingLeft).toBe(5);
-                       expect(verticalScale.paddingRight).toBe(4);
-
-                       // Extra size when scale label showing
-                       config.scaleLabel.show = true;
-                       minSize = verticalScale.update(100, 300);
-                       expect(minSize).toEqual({
-                               width: 100,
-                               height: 46,
-                       });
+               var minSize = verticalScale.update(100, 300);
+               expect(minSize).toEqual({
+                       width: 30,
+                       height: 300,
+               });
+               expect(verticalScale.width).toBe(30);
+               expect(verticalScale.height).toBe(300);
+               expect(verticalScale.paddingTop).toBe(6);
+               expect(verticalScale.paddingBottom).toBe(6);
+               expect(verticalScale.paddingLeft).toBe(0);
+               expect(verticalScale.paddingRight).toBe(0);
+
+               // Refit with margins to see the padding go away
+               minSize = verticalScale.update(30, 300, {
+                       left: 0,
+                       right: 0,
+                       top: 15,
+                       bottom: 3
+               });
+               expect(minSize).toEqual({
+                       width: 30,
+                       height: 300,
+               });
+               expect(verticalScale.paddingTop).toBe(0);
+               expect(verticalScale.paddingBottom).toBe(3);
+               expect(verticalScale.paddingLeft).toBe(0);
+               expect(verticalScale.paddingRight).toBe(0);
+
+               // Extra size when scale label showing
+               config.scaleLabel.show = true;
+               minSize = verticalScale.update(100, 300);
+               expect(minSize).toEqual({
+                       width: 48,
+                       height: 300,
+               });
+       });
+
+       it('should fit correctly when horizontal', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: [-5, 0, 2, -3, 5]
+                       }]
+               };
+               var mockContext = window.createMockContext();
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               config.position = "bottom";
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
                });
 
-               it('should draw correctly horizontally', function() {
-                       var scaleID = 'myScale';
+               var minSize = verticalScale.update(100, 300);
+               expect(minSize).toEqual({
+                       width: 100,
+                       height: 28,
+               });
+               expect(verticalScale.width).toBe(100);
+               expect(verticalScale.height).toBe(28);
+               expect(verticalScale.paddingTop).toBe(0);
+               expect(verticalScale.paddingBottom).toBe(0);
+               expect(verticalScale.paddingLeft).toBe(18);
+               expect(verticalScale.paddingRight).toBe(13);
+
+               // Refit with margins to see the padding go away
+               minSize = verticalScale.update(100, 28, {
+                       left: 10,
+                       right: 6,
+                       top: 15,
+                       bottom: 3
+               });
+               expect(minSize).toEqual({
+                       width: 100,
+                       height: 28,
+               });
+               expect(verticalScale.paddingTop).toBe(0);
+               expect(verticalScale.paddingBottom).toBe(0);
+               expect(verticalScale.paddingLeft).toBe(8);
+               expect(verticalScale.paddingRight).toBe(7);
+
+               // Extra size when scale label showing
+               config.scaleLabel.show = true;
+               minSize = verticalScale.update(100, 300);
+               expect(minSize).toEqual({
+                       width: 100,
+                       height: 46,
+               });
+       });
+
+       it('should draw correctly horizontally', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: [-5, 0, 2, -3, 5]
+                       }]
+               };
+               var mockContext = window.createMockContext();
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               config.position = "bottom";
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var horizontalScale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
-                       var mockData = {
-                               datasets: [{
-                                       xAxisID: scaleID, // for the horizontal scale
-                                       yAxisID: scaleID,
-                                       data: [-5, 0, 2, -3, 5]
-                               }]
-                       };
-                       var mockContext = window.createMockContext();
-
-                       var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                       config.position = "bottom";
-                       var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                       var horizontalScale = new Constructor({
-                               ctx: mockContext,
-                               options: config,
-                               data: mockData,
-                               id: scaleID
-                       });
-
-                       var minSize = horizontalScale.fit(100, 300);
-                       minSize = horizontalScale.fit(100, 28, {
-                               left: 10,
-                               right: 6,
-                               top: 15,
-                               bottom: 3
-                       });
-
-                       horizontalScale.left = 0;
-                       horizontalScale.right = minSize.width;
-                       horizontalScale.top = 0;
-                       horizontalScale.bottom = minSize.height;
-
-                       var chartArea = {
-                               top: 100,
-                               bottom: 0,
-                               left: 0,
-                               right: minSize.width
-                       };
-                       horizontalScale.draw(chartArea);
-
-                       expect(mockContext.getCalls()).toEqual([{
-                               "name": "measureText",
-                               "args": ["-10"]
-                       }, {
-                               "name": "measureText",
-                               "args": ["10"]
-                       }, {
-                               "name": "measureText",
-                               "args": ["-10"]
-                       }, {
-                               "name": "measureText",
-                               "args": ["10"]
-                       }, {
-                               "name": "setFillStyle",
-                               "args": ["#666"]
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0, 0, 0, 0.1)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "moveTo",
-                               "args": [5.5, 0]
-                       }, {
-                               "name": "lineTo",
-                               "args": [5.5, 5]
-                       }, {
-                               "name": "moveTo",
-                               "args": [5.5, 100]
-                       }, {
-                               "name": "lineTo",
-                               "args": [5.5, 0]
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0,0,0,0.25)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "moveTo",
-                               "args": [51, 0]
-                       }, {
-                               "name": "lineTo",
-                               "args": [51, 5]
-                       }, {
-                               "name": "moveTo",
-                               "args": [51, 100]
-                       }, {
-                               "name": "lineTo",
-                               "args": [51, 0]
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0, 0, 0, 0.1)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "moveTo",
-                               "args": [96.5, 0]
-                       }, {
-                               "name": "lineTo",
-                               "args": [96.5, 5]
-                       }, {
-                               "name": "moveTo",
-                               "args": [96.5, 100]
-                       }, {
-                               "name": "lineTo",
-                               "args": [96.5, 0]
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "fillText",
-                               "args": ["-10", 5, 10]
-                       }, {
-                               "name": "fillText",
-                               "args": ["0", 50.5, 10]
-                       }, {
-                               "name": "fillText",
-                               "args": ["10", 96, 10]
-                       }]);
-
-                       // Turn off some drawing
-                       config.gridLines.drawTicks = false;
-                       config.gridLines.drawOnChartArea = false;
-                       config.labels.show = false;
-                       config.scaleLabel.show = true;
-                       config.scaleLabel.labelString = 'myLabel'
-
-                       mockContext.resetCalls();
-
-                       horizontalScale.draw();
-                       expect(mockContext.getCalls()).toEqual([{
-                               "name": "setFillStyle",
-                               "args": ["#666"]
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0, 0, 0, 0.1)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0,0,0,0.25)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "setLineWidth",
-                               "args": [1]
-                       }, {
-                               "name": "setStrokeStyle",
-                               "args": ["rgba(0, 0, 0, 0.1)"]
-                       }, {
-                               "name": "beginPath",
-                               "args": []
-                       }, {
-                               "name": "stroke",
-                               "args": []
-                       }, {
-                               "name": "fillText",
-                               "args": ["myLabel", 50, 22]
-                       }]);
+               var minSize = horizontalScale.update(100, 300);
+               minSize = horizontalScale.update(100, 28, {
+                       left: 10,
+                       right: 6,
+                       top: 15,
+                       bottom: 3
+               });
 
-                       // Turn off display
+               horizontalScale.left = 0;
+               horizontalScale.right = minSize.width;
+               horizontalScale.top = 0;
+               horizontalScale.bottom = minSize.height;
+
+               var chartArea = {
+                       top: 100,
+                       bottom: 0,
+                       left: 0,
+                       right: minSize.width
+               };
+               mockContext.resetCalls();
+               horizontalScale.draw(chartArea);
+
+               var expected = [{
+                       "name": "setFillStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [8.5, 0]
+               }, {
+                       "name": "lineTo",
+                       "args": [8.5, 10]
+               }, {
+                       "name": "moveTo",
+                       "args": [8.5, 100]
+               }, {
+                       "name": "lineTo",
+                       "args": [8.5, 0]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [8, 8]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-10", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.25)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [51.5, 0]
+               }, {
+                       "name": "lineTo",
+                       "args": [51.5, 10]
+               }, {
+                       "name": "moveTo",
+                       "args": [51.5, 100]
+               }, {
+                       "name": "lineTo",
+                       "args": [51.5, 0]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [51, 8]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["0", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [93.5, 0]
+               }, {
+                       "name": "lineTo",
+                       "args": [93.5, 10]
+               }, {
+                       "name": "moveTo",
+                       "args": [93.5, 100]
+               }, {
+                       "name": "lineTo",
+                       "args": [93.5, 0]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [93, 8]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["10", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }];
+               expect(mockContext.getCalls()).toEqual(expected);
+
+               // Turn off some drawing
+               config.gridLines.drawTicks = false;
+               config.gridLines.drawOnChartArea = false;
+               config.ticks.show = false;
+               config.scaleLabel.show = true;
+               config.scaleLabel.labelString = 'myLabel'
+
+               mockContext.resetCalls();
+
+               horizontalScale.draw();
+               expect(mockContext.getCalls()).toEqual([{
+                       "name": "setFillStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.25)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "fillText",
+                       "args": ["myLabel", 50, 22]
+               }]);
+
+               // Turn off display
+
+               mockContext.resetCalls();
+               config.display = false;
+               horizontalScale.draw();
+               expect(mockContext.getCalls()).toEqual([]);
+       });
+
+       it('should draw correctly vertically', function() {
+               var scaleID = 'myScale';
+
+               var mockData = {
+                       datasets: [{
+                               xAxisID: scaleID, // for the horizontal scale
+                               yAxisID: scaleID,
+                               data: [-5, 0, 2, -3, 5]
+                       }]
+               };
+               var mockContext = window.createMockContext();
+
+               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               var Constructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScale = new Constructor({
+                       ctx: mockContext,
+                       options: config,
+                       data: mockData,
+                       id: scaleID
+               });
 
-                       mockContext.resetCalls();
-                       config.display = false;
-                       horizontalScale.draw();
-                       expect(mockContext.getCalls()).toEqual([]);
+               var minSize = verticalScale.update(100, 300);
+               minSize = verticalScale.update(30, 300, {
+                       left: 0,
+                       right: 0,
+                       top: 15,
+                       bottom: 3
+               });
+               expect(minSize).toEqual({
+                       width: 30,
+                       height: 300,
                });
 
-               it('should draw correctly vertically', function() {
-                               var scaleID = 'myScale';
-
-                               var mockData = {
-                                       datasets: [{
-                                               xAxisID: scaleID, // for the horizontal scale
-                                               yAxisID: scaleID,
-                                               data: [-5, 0, 2, -3, 5]
-                                       }]
-                               };
-                               var mockContext = window.createMockContext();
-
-                               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
-                               var Constructor = Chart.scaleService.getScaleConstructor('linear');
-                               var verticalScale = new Constructor({
-                                       ctx: mockContext,
-                                       options: config,
-                                       data: mockData,
-                                       id: scaleID
-                               });
-
-                               var minSize = verticalScale.fit(100, 300);
-                               minSize = verticalScale.fit(33, 300, {
-                                       left: 0,
-                                       right: 0,
-                                       top: 15,
-                                       bottom: 3
-                               });
-                               expect(minSize).toEqual({
-                                       width: 33,
-                                       height: 300,
-                               });
-
-                               verticalScale.left = 0;
-                               verticalScale.right = minSize.width;
-                               verticalScale.top = 0;
-                               verticalScale.bottom = minSize.height;
-
-                               var chartArea = {
-                                       top: 0,
-                                       bottom: minSize.height,
-                                       left: minSize.width,
-                                       right: minSize.width + 100
-                               };
-                               verticalScale.draw(chartArea);
-
-                               expect(mockContext.getCalls()).toEqual([{
-                                       "name": "measureText",
-                                       "args": ["5"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["4"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["3"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["2"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["1"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["0"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-1"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-2"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-3"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-4"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-5"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["5"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["4"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["3"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["2"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["1"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["0"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-1"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-2"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-3"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-4"]
-                               }, {
-                                       "name": "measureText",
-                                       "args": ["-5"]
-                               }, {
-                                       "name": "setFillStyle",
-                                       "args": ["#666"]
-                               }, {
-                                       "name": "setLineWidth",
-                                       "args": [1]
-                               }, {
-                                       "name": "setStrokeStyle",
-                                       "args": ["rgba(0, 0, 0, 0.1)"]
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 0.5]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 0.5]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 0.5]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 0.5]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 30.19999999999999]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 30.19999999999999]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 30.19999999999999]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 30.19999999999999]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 59.900000000000006]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 59.900000000000006]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 59.900000000000006]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 59.900000000000006]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 89.6]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 89.6]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 89.6]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 89.6]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 119.30000000000001]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 119.30000000000001]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 119.30000000000001]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 119.30000000000001]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "setLineWidth",
-                                       "args": [1]
-                               }, {
-                                       "name": "setStrokeStyle",
-                                       "args": ["rgba(0,0,0,0.25)"]
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 149]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 149]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 149]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 149]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "setLineWidth",
-                                       "args": [1]
-                               }, {
-                                       "name": "setStrokeStyle",
-                                       "args": ["rgba(0, 0, 0, 0.1)"]
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 178.7]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 178.7]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 178.7]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 178.7]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 208.4]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 208.4]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 208.4]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 208.4]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 238.1]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 238.1]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 238.1]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 238.1]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 267.8]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 267.8]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 267.8]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 267.8]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "beginPath",
-                                       "args": []
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [28, 297.5]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [33, 297.5]
-                               }, {
-                                       "name": "moveTo",
-                                       "args": [33, 297.5]
-                               }, {
-                                       "name": "lineTo",
-                                       "args": [133, 297.5]
-                               }, {
-                                       "name": "stroke",
-                                       "args": []
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["5", 23, 0]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["4", 23, 29.69999999999999]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["3", 23, 59.400000000000006]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["2", 23, 89.1]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["1", 23, 118.80000000000001]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["0", 23, 148.5]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["-1", 23, 178.2]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["-2", 23, 207.9]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["-3", 23, 237.6]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["-4", 23, 267.3]
-                               }, {
-                                       "name": "fillText",
-                                       "args": ["-5", 23, 297]
-                               }]);
-
-                               // Turn off some drawing
-                               config.gridLines.drawTicks = false;
-                               config.gridLines.drawOnChartArea = false;
-                               config.labels.show = false;
-                               config.scaleLabel.show = true;
-
-                               mockContext.resetCalls();
-
-                               verticalScale.draw();
-                               expect(mockContext.getCalls()).toEqual([{
-                                               "name": "setFillStyle",
-                                               "args": ["#666"]
-                                       }, {
-                                               "name": "setLineWidth",
-                                               "args": [1]
-                                       }, {
-                                               "name": "setStrokeStyle",
-                                               "args": ["rgba(0, 0, 0, 0.1)"]
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "setLineWidth",
-                                               "args": [1]
-                                       }, {
-                                               "name": "setStrokeStyle",
-                                               "args": ["rgba(0,0,0,0.25)"]
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "setLineWidth",
-                                               "args": [1]
-                                       }, {
-                                               "name": "setStrokeStyle",
-                                               "args": ["rgba(0, 0, 0, 0.1)"]
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "beginPath",
-                                               "args": []
-                                       }, {
-                                               "name": "stroke",
-                                               "args": []
-                                       }, {
-                                               "name": "save",
-                                               "args": []
-                                       }, {
-                                               "name": "translate",
-                                               "args": [6, 150]
-                                       }, {
-                                               "name": "rotate",
-                                               "args": [-1.5707963267948966]
-                                       }, {
-                                               "name": "fillText",
-                                               "args": ["", 0, 0]
-                                       }, {
-                                               "name": "restore",
-                                               "args": []
-                                       }]);
-                               });
-               });
\ No newline at end of file
+               verticalScale.left = 0;
+               verticalScale.right = minSize.width;
+               verticalScale.top = 0;
+               verticalScale.bottom = minSize.height;
+
+               var chartArea = {
+                       top: 0,
+                       bottom: minSize.height,
+                       left: minSize.width,
+                       right: minSize.width + 100
+               };
+
+               mockContext.resetCalls();
+               verticalScale.draw(chartArea);
+
+               expect(mockContext.getCalls()).toEqual([{
+                       "name": "setFillStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 0.5]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 0.5]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 0.5]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 0.5]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 0]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["5", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 30.2]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 30.2]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 30.2]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 30.2]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 29.7]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["4", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 59.9]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 59.9]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 59.9]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 59.9]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 59.4]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["3", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 89.6]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 89.6]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 89.6]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 89.6]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 89.1]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["2", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 119.3]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 119.3]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 119.3]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 119.3]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 118.8]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["1", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.25)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 149]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 149]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 149]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 149]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 148.5]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["0", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 178.7]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 178.7]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 178.7]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 178.7]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 178.2]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-1", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 208.4]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 208.4]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 208.4]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 208.4]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 207.9]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-2", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 238.1]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 238.1]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 238.1]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 238.1]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 237.6]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-3", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 267.8]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 267.8]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 267.8]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 267.8]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 267.3]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-4", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "moveTo",
+                       "args": [25, 297.5]
+               }, {
+                       "name": "lineTo",
+                       "args": [30, 297.5]
+               }, {
+                       "name": "moveTo",
+                       "args": [30, 297.5]
+               }, {
+                       "name": "lineTo",
+                       "args": [130, 297.5]
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [20, 297]
+               }, {
+                       "name": "rotate",
+                       "args": [-0]
+               }, {
+                       "name": "fillText",
+                       "args": ["-5", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }]);
+
+               // Turn off some drawing
+               config.gridLines.drawTicks = false;
+               config.gridLines.drawOnChartArea = false;
+               config.ticks.show = false;
+               config.scaleLabel.show = true;
+
+               mockContext.resetCalls();
+
+               verticalScale.draw();
+               expect(mockContext.getCalls()).toEqual([{
+                       "name": "setFillStyle",
+                       "args": ["#666"]
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0,0,0,0.25)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "setLineWidth",
+                       "args": [1]
+               }, {
+                       "name": "setStrokeStyle",
+                       "args": ["rgba(0, 0, 0, 0.1)"]
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "beginPath",
+                       "args": []
+               }, {
+                       "name": "stroke",
+                       "args": []
+               }, {
+                       "name": "save",
+                       "args": []
+               }, {
+                       "name": "translate",
+                       "args": [6, 150]
+               }, {
+                       "name": "rotate",
+                       "args": [-1.5707963267948966]
+               }, {
+                       "name": "fillText",
+                       "args": ["", 0, 0]
+               }, {
+                       "name": "restore",
+                       "args": []
+               }]);
+       });
+});
\ No newline at end of file
index 34cb88ae6157a7e30e07713a5bb2ecdb77a0a48e..30cc240d9f749aa95f2ead548b7ff9455d8d8545 100644 (file)
@@ -10,16 +10,17 @@ describe('Logarithmic Scale tests', function() {
                var defaultConfig = Chart.scaleService.getScaleDefaults('logarithmic');
                expect(defaultConfig).toEqual({
                        display: true,
-                       position: "left",
                        gridLines: {
-                               show: true,
                                color: "rgba(0, 0, 0, 0.1)",
-                               lineWidth: 1,
                                drawOnChartArea: true,
                                drawTicks: true,
-                               zeroLineWidth: 1,
+                               lineWidth: 1,
+                               offsetGridLines: false,
+                               show: true,
                                zeroLineColor: "rgba(0,0,0,0.25)",
+                               zeroLineWidth: 1,
                        },
+                       position: "left",
                        scaleLabel: {
                                fontColor: '#666',
                                fontFamily: 'Helvetica Neue',
@@ -28,18 +29,20 @@ describe('Logarithmic Scale tests', function() {
                                labelString: '',
                                show: false,
                        },
-                       reverse: false,
-                       override: null,
-                       labels: {
-                               show: true,
+                       ticks: {
+                               beginAtZero: false,
+                               fontColor: "#666",
+                               fontFamily: "Helvetica Neue",
+                               fontSize: 12,
+                               fontStyle: "normal",
+                               maxRotation: 90,
+                               minRotation: 20,
                                mirror: false,
                                padding: 10,
+                               reverse: false,
+                               show: true,
                                template: "<%var remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));if (remain === 1 || remain === 2 || remain === 5) {%><%=value.toExponential()%><%} else {%><%= null %><%}%>",
-                               fontSize: 12,
-                               fontStyle: "normal",
-                               fontColor: "#666",
-                               fontFamily: "Helvetica Neue"
-                       }
+                       },
                });
        });
 
@@ -59,9 +62,10 @@ describe('Logarithmic Scale tests', function() {
                        }]
                };
 
+               var mockContext = window.createMockContext();
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: Chart.scaleService.getScaleDefaults('logarithmic'), // use default config for scale
                        data: mockData,
                        id: scaleID
@@ -71,9 +75,9 @@ describe('Logarithmic Scale tests', function() {
                expect(scale.min).toBe(undefined); // not yet set
                expect(scale.max).toBe(undefined);
 
-               scale.calculateRange();
-               expect(scale.min).toBe(5);
-               expect(scale.max).toBe(5000);
+               scale.update(400, 400);
+               expect(scale.min).toBe(1);
+               expect(scale.max).toBe(10000);
        });
 
        it('Should correctly determine the max & min for scatter data', function() {
@@ -99,31 +103,32 @@ describe('Logarithmic Scale tests', function() {
                        }]
                };
 
+               var mockContext = window.createMockContext();
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var verticalScale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               verticalScale.calculateRange();
-               expect(verticalScale.min).toBe(6);
-               expect(verticalScale.max).toBe(121);
+               verticalScale.update(400, 400);
+               expect(verticalScale.min).toBe(1);
+               expect(verticalScale.max).toBe(1000);
 
                var horizontalConfig = Chart.helpers.clone(config);
                horizontalConfig.position = 'bottom';
                var horizontalScale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: horizontalConfig,
                        data: mockData,
                        id: scaleID,
                });
 
-               horizontalScale.calculateRange();
-               expect(horizontalScale.min).toBe(2);
-               expect(horizontalScale.max).toBe(99);
+               horizontalScale.update(400, 400);
+               expect(horizontalScale.min).toBe(1);
+               expect(horizontalScale.max).toBe(100);
        });
 
        it('Should correctly determine the min and max data values when stacked mode is turned on', function() {
@@ -145,17 +150,18 @@ describe('Logarithmic Scale tests', function() {
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
                config.stacked = true; // enable scale stacked mode
 
+               var mockContext = window.createMockContext();
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               scale.calculateRange();
-               expect(scale.min).toBe(11);
-               expect(scale.max).toBe(160);
+               scale.update(400, 400);
+               expect(scale.min).toBe(10);
+               expect(scale.max).toBe(1000);
        });
 
        it('Should ensure that the scale has a max and min that are not equal', function() {
@@ -165,16 +171,17 @@ describe('Logarithmic Scale tests', function() {
                        datasets: []
                };
 
+               var mockContext = window.createMockContext();
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               scale.calculateRange();
+               scale.update(400, 00);
                expect(scale.min).toBe(1);
                expect(scale.max).toBe(10);
 
@@ -183,7 +190,7 @@ describe('Logarithmic Scale tests', function() {
                        data: [0.15, 0.15]
                }];
 
-               scale.calculateRange();
+               scale.update(400, 400);
                expect(scale.min).toBe(0.01);
                expect(scale.max).toBe(1);
        });
@@ -207,13 +214,11 @@ describe('Logarithmic Scale tests', function() {
                        id: scaleID
                });
 
-               scale.calculateRange();
-               expect(scale.ticks).toBe(undefined); // not set
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
 
-               // Large enough to be unimportant
-               var maxWidth = 400;
-               var maxHeight = 400;
-               scale.generateTicks(maxWidth, maxHeight);
+               scale.buildTicks();
 
                // Counts down because the lines are drawn top to bottom
                expect(scale.ticks).toEqual([100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]);
@@ -232,7 +237,7 @@ describe('Logarithmic Scale tests', function() {
                };
 
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               config.reverse = true;
+               config.ticks.reverse = true;
 
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
@@ -242,13 +247,11 @@ describe('Logarithmic Scale tests', function() {
                        id: scaleID
                });
 
-               scale.calculateRange();
-               expect(scale.ticks).toBe(undefined); // not set
+               // Set arbitrary width and height for now
+               scale.width = 50;
+               scale.height = 400;
 
-               // Large enough to be unimportant
-               var maxWidth = 400;
-               var maxHeight = 400;
-               scale.generateTicks(maxWidth, maxHeight);
+               scale.buildTicks();
 
                // Counts down because the lines are drawn top to bottom
                expect(scale.ticks).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]);
@@ -256,43 +259,6 @@ describe('Logarithmic Scale tests', function() {
                expect(scale.end).toBe(1);
        });
 
-       it('Should generate tick marks using the user supplied options', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               yAxisID: scaleID,
-                               data: [10, 5, 0, 25, 78]
-                       }, ]
-               };
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               config.override = {
-                       steps: 9,
-                       start: 1,
-                       stepWidth: 1
-               };
-
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var scale = new Constructor({
-                       ctx: {},
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               scale.calculateRange();
-
-               // Large enough to be unimportant
-               var maxWidth = 400;
-               var maxHeight = 400;
-               scale.generateTicks(maxWidth, maxHeight);
-
-               expect(scale.ticks).toEqual([10, 9, 8, 7, 6, 5, 4, 3, 2, 1]);
-               expect(scale.start).toBe(1);
-               expect(scale.end).toBe(10);
-       });
-
        it('Should build labels using the default template', function() {
                var scaleID = 'myScale';
 
@@ -303,26 +269,19 @@ describe('Logarithmic Scale tests', function() {
                        }, ]
                };
 
+               var mockContext = window.createMockContext();
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               scale.calculateRange();
-
-               // Large enough to be unimportant
-               var maxWidth = 400;
-               var maxHeight = 400;
-               scale.generateTicks(maxWidth, maxHeight);
-
-               // Generate labels
-               scale.buildLabels();
+               scale.update(400, 400);
 
-               expect(scale.labels).toEqual(['1e+2', '', '', '', '', '5e+1', '', '', '2e+1', '1e+1', '', '', '', '', '5e+0', '', '', '2e+0', '1e+0']);
+               expect(scale.ticks).toEqual(['1e+2', '', '', '', '', '5e+1', '', '', '2e+1', '1e+1', '', '', '', '', '5e+0', '', '', '2e+0', '1e+0']);
        });
 
        it('Should build labels using the user supplied callback', function() {
@@ -336,30 +295,23 @@ describe('Logarithmic Scale tests', function() {
                };
 
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               config.labels.userCallback = function(value, index) {
+               config.ticks.userCallback = function(value, index) {
                        return index.toString();
                };
 
+               var mockContext = window.createMockContext();
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var scale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               scale.calculateRange();
-
-               // Large enough to be unimportant
-               var maxWidth = 400;
-               var maxHeight = 400;
-               scale.generateTicks(maxWidth, maxHeight);
-
-               // Generate labels
-               scale.buildLabels();
+               scale.update(400, 400);
 
                // Just the index
-               expect(scale.labels).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']);
+               expect(scale.ticks).toEqual(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']);
        });
 
        it('Should get the correct pixel value for a point', function() {
@@ -373,17 +325,17 @@ describe('Logarithmic Scale tests', function() {
                        }]
                };
 
+               var mockContext = window.createMockContext();
                var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
                var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
                var verticalScale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: config,
                        data: mockData,
                        id: scaleID
                });
 
-               verticalScale.calculateRange();
-               verticalScale.generateTicks(50, 100);
+               verticalScale.update(50, 100);
 
                // Fake out positioning of the scale service
                verticalScale.left = 0;
@@ -395,21 +347,20 @@ describe('Logarithmic Scale tests', function() {
                verticalScale.width = 50;
                verticalScale.height = 110;
 
-               expect(verticalScale.getPointPixelForValue(100, 0, 0)).toBe(5); // top + paddingTop
-               expect(verticalScale.getPointPixelForValue(1, 0, 0)).toBe(105); // bottom - paddingBottom
-               expect(verticalScale.getPointPixelForValue(10, 0, 0)).toBe(55); // halfway
+               expect(verticalScale.getPixelForValue(100, 0, 0)).toBe(5); // top + paddingTop
+               expect(verticalScale.getPixelForValue(1, 0, 0)).toBe(105); // bottom - paddingBottom
+               expect(verticalScale.getPixelForValue(10, 0, 0)).toBe(55); // halfway
 
                var horizontalConfig = Chart.helpers.clone(config);
                horizontalConfig.position = 'bottom';
                var horizontalScale = new Constructor({
-                       ctx: {},
+                       ctx: mockContext,
                        options: horizontalConfig,
                        data: mockData,
                        id: scaleID,
                });
 
-               horizontalScale.calculateRange();
-               horizontalScale.generateTicks(100, 50);
+               horizontalScale.update(100, 50);
 
                // Fake out positioning of the scale service
                horizontalScale.left = 0;
@@ -421,1185 +372,8 @@ describe('Logarithmic Scale tests', function() {
                horizontalScale.width = 110;
                horizontalScale.height = 50;
 
-               // Range expands to [-2, 2] due to nicenum algorithm
-               expect(horizontalScale.getPointPixelForValue(100, 0, 0)).toBe(105); // right - paddingRight
-               expect(horizontalScale.getPointPixelForValue(1, 0, 0)).toBe(5); // left + paddingLeft
-               expect(horizontalScale.getPointPixelForValue(10, 0, 0)).toBe(55); // halfway
-       });
-
-       it('should get the correct pixel value for a bar', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               xAxisID: scaleID, // for the horizontal scale
-                               yAxisID: scaleID,
-                               data: [10, 5, 1, 25, 78]
-                       }]
-               };
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var verticalScale = new Constructor({
-                       ctx: {},
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               verticalScale.calculateRange();
-               verticalScale.generateTicks(50, 100);
-
-               // Fake out positioning of the scale service
-               verticalScale.left = 0;
-               verticalScale.top = 0;
-               verticalScale.right = 50;
-               verticalScale.bottom = 110;
-               verticalScale.paddingTop = 5;
-               verticalScale.paddingBottom = 5;
-               verticalScale.width = 50;
-               verticalScale.height = 110;
-
-               expect(verticalScale.calculateBarBase()).toBe(105); // bottom
-               expect(verticalScale.calculateBarY(0, 3)).toBe(35.10299956639811); // bottom
-       });
-
-       it('should fit correctly', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               xAxisID: scaleID, // for the horizontal scale
-                               yAxisID: scaleID,
-                               data: [10, 5, 1, 25, 78]
-                       }]
-               };
-               var mockContext = window.createMockContext();
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var verticalScale = new Constructor({
-                       ctx: mockContext,
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               var minSize = verticalScale.fit(100, 300);
-               expect(minSize).toEqual({
-                       width: 53,
-                       height: 300,
-               });
-               expect(verticalScale.width).toBe(53);
-               expect(verticalScale.height).toBe(300);
-               expect(verticalScale.paddingTop).toBe(6);
-               expect(verticalScale.paddingBottom).toBe(6);
-               expect(verticalScale.paddingLeft).toBe(0);
-               expect(verticalScale.paddingRight).toBe(0);
-
-               // Refit with margins to see the padding go away
-               minSize = verticalScale.fit(53, 300, {
-                       left: 0,
-                       right: 0,
-                       top: 15,
-                       bottom: 3
-               });
-               expect(minSize).toEqual({
-                       width: 53,
-                       height: 300,
-               });
-               expect(verticalScale.paddingTop).toBe(0);
-               expect(verticalScale.paddingBottom).toBe(3);
-               expect(verticalScale.paddingLeft).toBe(0);
-               expect(verticalScale.paddingRight).toBe(0);
-
-               config.scaleLabel.show = true;
-               minSize = verticalScale.fit(100, 300);
-               expect(minSize).toEqual({
-                       width: 71,
-                       height: 300,
-               });
-       });
-
-       it('should fit correctly when horizontal', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               xAxisID: scaleID, // for the horizontal scale
-                               yAxisID: scaleID,
-                               data: [10, 5, 1, 25, 78]
-                       }]
-               };
-               var mockContext = window.createMockContext();
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               config.position = "bottom";
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var verticalScale = new Constructor({
-                       ctx: mockContext,
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               var minSize = verticalScale.fit(100, 300);
-               expect(minSize).toEqual({
-                       width: 100,
-                       height: 28,
-               });
-               expect(verticalScale.width).toBe(100);
-               expect(verticalScale.height).toBe(28);
-               expect(verticalScale.paddingTop).toBe(0);
-               expect(verticalScale.paddingBottom).toBe(0);
-               expect(verticalScale.paddingLeft).toBe(20);
-               expect(verticalScale.paddingRight).toBe(20);
-
-               // Refit with margins to see the padding go away
-               minSize = verticalScale.fit(100, 28, {
-                       left: 10,
-                       right: 6,
-                       top: 15,
-                       bottom: 3
-               });
-               expect(minSize).toEqual({
-                       width: 100,
-                       height: 28,
-               });
-               expect(verticalScale.paddingTop).toBe(0);
-               expect(verticalScale.paddingBottom).toBe(0);
-               expect(verticalScale.paddingLeft).toBe(10);
-               expect(verticalScale.paddingRight).toBe(14);
-
-               config.scaleLabel.show = true;
-               minSize = verticalScale.fit(100, 300);
-               expect(minSize).toEqual({
-                       width: 100,
-                       height: 46,
-               });
-       });
-
-       it('should draw correctly horizontally', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               xAxisID: scaleID, // for the horizontal scale
-                               yAxisID: scaleID,
-                               data: [10, 5, 1, 25, 78]
-                       }]
-               };
-               var mockContext = window.createMockContext();
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               config.position = "bottom";
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var horizontalScale = new Constructor({
-                       ctx: mockContext,
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               var minSize = horizontalScale.fit(100, 300);
-               minSize = horizontalScale.fit(100, 28, {
-                       left: 10,
-                       right: 6,
-                       top: 15,
-                       bottom: 3
-               });
-
-               horizontalScale.left = 0;
-               horizontalScale.right = minSize.width;
-               horizontalScale.top = 0;
-               horizontalScale.bottom = minSize.height;
-
-               var chartArea = {
-                       top: 100,
-                       bottom: 0,
-                       left: 0,
-                       right: minSize.width
-               };
-               horizontalScale.draw(chartArea);
-
-               expect(mockContext.getCalls()).toEqual([{
-                       "name": "measureText",
-                       "args": ["1e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+2"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+2"]
-               }, {
-                       "name": "setFillStyle",
-                       "args": ["#666"]
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0,0,0,0.25)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [10.5, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [10.5, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [10.5, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [10.5, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0, 0, 0, 0.1)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [21.939139835231288, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [21.939139835231288, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [21.939139835231288, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [21.939139835231288, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28.63060767934717, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [28.63060767934717, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [28.63060767934717, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [28.63060767934717, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [33.378279670462575, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [33.378279670462575, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [33.378279670462575, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [33.378279670462575, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [37.06086016476871, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [37.06086016476871, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [37.06086016476871, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [37.06086016476871, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [40.06974751457846, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [40.06974751457846, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [40.06974751457846, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [40.06974751457846, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [42.613725520541756, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [42.613725520541756, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [42.613725520541756, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [42.613725520541756, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [44.817419505693856, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [44.817419505693856, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [44.817419505693856, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [44.817419505693856, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [46.76121535869434, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [46.76121535869434, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [46.76121535869434, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [46.76121535869434, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [48.5, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [48.5, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [48.5, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [48.5, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [59.93913983523129, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [59.93913983523129, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [59.93913983523129, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [59.93913983523129, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [66.63060767934718, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [66.63060767934718, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [66.63060767934718, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [66.63060767934718, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [71.37827967046258, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [71.37827967046258, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [71.37827967046258, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [71.37827967046258, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [75.06086016476871, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [75.06086016476871, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [75.06086016476871, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [75.06086016476871, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [78.06974751457845, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [78.06974751457845, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [78.06974751457845, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [78.06974751457845, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [80.61372552054176, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [80.61372552054176, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [80.61372552054176, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [80.61372552054176, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [82.81741950569385, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [82.81741950569385, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [82.81741950569385, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [82.81741950569385, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [84.76121535869434, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [84.76121535869434, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [84.76121535869434, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [84.76121535869434, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [86.5, 0]
-               }, {
-                       "name": "lineTo",
-                       "args": [86.5, 5]
-               }, {
-                       "name": "moveTo",
-                       "args": [86.5, 100]
-               }, {
-                       "name": "lineTo",
-                       "args": [86.5, 0]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "fillText",
-                       "args": ["1e+0", 10, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["2e+0", 21.439139835231288, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["5e+0", 36.56086016476871, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["1e+1", 48, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["2e+1", 59.43913983523129, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["5e+1", 74.56086016476871, 10]
-               }, {
-                       "name": "fillText",
-                       "args": ["1e+2", 86, 10]
-               }]);
-
-               // Turn off some drawing
-               config.gridLines.drawTicks = false;
-               config.gridLines.drawOnChartArea = false;
-               config.labels.show = false;
-               config.scaleLabel.show = true;
-               config.scaleLabel.labelString = 'my label';
-
-               mockContext.resetCalls();
-
-               horizontalScale.draw();
-               expect(mockContext.getCalls()).toEqual([{
-                       "name": "setFillStyle",
-                       "args": ["#666"]
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0,0,0,0.25)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0, 0, 0, 0.1)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "fillText",
-                       "args": ["my label", 50, 22]
-               }]);
-
-               // Turn off display
-
-               mockContext.resetCalls();
-               config.display = false;
-               horizontalScale.draw();
-               expect(mockContext.getCalls()).toEqual([]);
-       });
-
-       it('should draw correctly vertically', function() {
-               var scaleID = 'myScale';
-
-               var mockData = {
-                       datasets: [{
-                               xAxisID: scaleID, // for the horizontal scale
-                               yAxisID: scaleID,
-                               data: [10, 5, 1, 2.5, 7.8]
-                       }]
-               };
-               var mockContext = window.createMockContext();
-
-               var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('logarithmic'));
-               var Constructor = Chart.scaleService.getScaleConstructor('logarithmic');
-               var verticalScale = new Constructor({
-                       ctx: mockContext,
-                       options: config,
-                       data: mockData,
-                       id: scaleID
-               });
-
-               var minSize = verticalScale.fit(100, 300);
-               minSize = verticalScale.fit(33, 300, {
-                       left: 0,
-                       right: 0,
-                       top: 15,
-                       bottom: 3
-               });
-               expect(minSize).toEqual({
-                       width: 33,
-                       height: 300,
-               });
-
-               verticalScale.left = 0;
-               verticalScale.right = minSize.width;
-               verticalScale.top = 0;
-               verticalScale.bottom = minSize.height;
-
-               var chartArea = {
-                       top: 0,
-                       bottom: minSize.height,
-                       left: minSize.width,
-                       right: minSize.width + 100
-               };
-               verticalScale.draw(chartArea);
-
-               var expected = [{
-                       "name": "measureText",
-                       "args": ["1e+1"]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": ["5e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": ["2e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+1"]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": ["5e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": [""]
-               }, {
-                       "name": "measureText",
-                       "args": ["2e+0"]
-               }, {
-                       "name": "measureText",
-                       "args": ["1e+0"]
-               }, {
-                       "name": "setFillStyle",
-                       "args": ["#666"]
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0,0,0,0.25)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 0.5]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 0.5]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 0.5]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 0.5]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0, 0, 0, 0.1)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 14.089974696520528]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 14.089974696520528]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 14.089974696520528]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 14.089974696520528]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 29.28227386339279]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 29.28227386339279]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 29.28227386339279]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 29.28227386339279]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 46.50588211576573]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 46.50588211576573]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 46.50588211576573]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 46.50588211576573]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 66.38907863605783]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 66.38907863605783]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 66.38907863605783]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 66.38907863605783]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 89.9059087122024]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 89.9059087122024]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 89.9059087122024]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 89.9059087122024]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 118.68818257559516]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 118.68818257559516]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 118.68818257559516]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 118.68818257559516]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 155.79498734826026]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 155.79498734826026]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 155.79498734826026]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 155.79498734826026]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 208.0940912877976]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 208.0940912877976]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 208.0940912877976]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 208.0940912877976]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "moveTo",
-                       "args": [28, 297.5]
-               }, {
-                       "name": "lineTo",
-                       "args": [33, 297.5]
-               }, {
-                       "name": "moveTo",
-                       "args": [33, 297.5]
-               }, {
-                       "name": "lineTo",
-                       "args": [133, 297.5]
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "fillText",
-                       "args": ["1e+1", 23, 0]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 13.589974696520528]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 28.78227386339279]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 46.00588211576573]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 65.88907863605783]
-               }, {
-                       "name": "fillText",
-                       "args": ["5e+0", 23, 89.4059087122024]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 118.18818257559516]
-               }, {
-                       "name": "fillText",
-                       "args": ["", 23, 155.29498734826026]
-               }, {
-                       "name": "fillText",
-                       "args": ["2e+0", 23, 207.5940912877976]
-               }, {
-                       "name": "fillText",
-                       "args": ["1e+0", 23, 297]
-               }];
-               expect(mockContext.getCalls()).toEqual(expected);
-
-               // Turn off some drawing
-               config.gridLines.drawTicks = false;
-               config.gridLines.drawOnChartArea = false;
-               config.labels.show = false;
-               config.scaleLabel.show = true;
-               config.scaleLabel.labelString = 'my label';
-
-               mockContext.resetCalls();
-
-               verticalScale.draw();
-               expect(mockContext.getCalls()).toEqual([{
-                       "name": "setFillStyle",
-                       "args": ["#666"]
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0,0,0,0.25)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "setLineWidth",
-                       "args": [1]
-               }, {
-                       "name": "setStrokeStyle",
-                       "args": ["rgba(0, 0, 0, 0.1)"]
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "beginPath",
-                       "args": []
-               }, {
-                       "name": "stroke",
-                       "args": []
-               }, {
-                       "name": "save",
-                       "args": []
-               }, {
-                       "name": "translate",
-                       "args": [6, 150]
-               }, {
-                       "name": "rotate",
-                       "args": [-1.5707963267948966]
-               }, {
-                       "name": "fillText",
-                       "args": ["my label", 0, 0]
-               }, {
-                       "name": "restore",
-                       "args": []
-               }]);
+               expect(horizontalScale.getPixelForValue(100, 0, 0)).toBe(105); // right - paddingRight
+               expect(horizontalScale.getPixelForValue(1, 0, 0)).toBe(5); // left + paddingLeft
+               expect(horizontalScale.getPixelForValue(10, 0, 0)).toBe(55); // halfway
        });
 });
\ No newline at end of file