]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Add labelOffset option to scales 2517/head
authorTom Duncalf <tom@tomduncalf.com>
Wed, 11 May 2016 09:43:22 +0000 (10:43 +0100)
committerTom Duncalf <tom@tomduncalf.com>
Wed, 11 May 2016 09:43:22 +0000 (10:43 +0100)
docs/01-Scales.md
src/core/core.scale.js
test/core.helpers.tests.js
test/scale.category.tests.js
test/scale.linear.tests.js
test/scale.logarithmic.tests.js
test/scale.radialLinear.tests.js
test/scale.time.tests.js

index fd6c27dda997292a2aca083ee9014a8066f84833..efb3a893f7b195febb3545dc85c3bc5b56758e84 100644 (file)
@@ -41,7 +41,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *gridLines*.zeroLineColor | Color | "rgba(0, 0, 0, 0.25)" | Stroke color of the grid line for the first index (index 0).
 *gridLines*.offsetGridLines | Boolean | false | If true, offset labels from grid lines.
 **scaleLabel** | Object | | Title for the entire axis.
-*scaleLabel*.display | Boolean | false | 
+*scaleLabel*.display | Boolean | false |
 *scaleLabel*.labelString | String | "" | The text for the title. (i.e. "# of People", "Response Choices")
 *scaleLabel*.fontColor | Color | "#666" | Font color for the scale title.
 *scaleLabel*.fontFamily| String | "Helvetica Neue" | Font family for the scale title, follows CSS font-family options.
@@ -57,12 +57,13 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.minRotation | Number |  20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary.  *Note: Only applicable to horizontal scales.*
 *ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show. If not defined, it will limit to 11 ticks but will show all gridlines.
 *ticks*.padding | Number | 10 | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.*
+*ticks*.labelOffset | Number | 0 | Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
 *ticks*.mirror | Boolean | false | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
 *ticks*.reverse | Boolean | false | Reverses order of tick labels.
 *ticks*.display | Boolean | true | If true, show the ticks.
 *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value.
 *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.
-*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. 
+*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value.
 *ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value
 *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
 *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart.
@@ -181,7 +182,7 @@ The time scale extends the core scale class with the following tick template:
 
                // string - By default, no rounding is applied.  To round, set to a supported time unit eg. 'week', 'month', 'year', etc.
                round: false,
-               
+
                // Moment js for each of the units. Replaces `displayFormat`
                // To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
                displayFormats: {
@@ -310,4 +311,4 @@ Chart.scaleService.updateScaleDefaults('linear', {
                min: 0
        }
 })
-```
\ No newline at end of file
+```
index 6993c91041499324637d9667cc73a5bc9b5fca36..31a9b8a2a0f2b8e2bcf3a0ed8d700e4460e16ac9 100644 (file)
@@ -41,6 +41,7 @@ module.exports = function(Chart) {
                        display: true,
                        autoSkip: true,
                        autoSkipPadding: 0,
+                       labelOffset: 0,
                        callback: function(value) {
                                return '' + value;
                        }
@@ -557,7 +558,7 @@ module.exports = function(Chart) {
 
                                                if (this.options.ticks.display) {
                                                        this.ctx.save();
-                                                       this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
+                                                       this.ctx.translate(xLabelValue + this.options.ticks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl);
                                                        this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
                                                        this.ctx.font = tickLabelFont;
                                                        this.ctx.textAlign = (isRotated) ? "right" : "center";
@@ -650,7 +651,7 @@ module.exports = function(Chart) {
                                                                }
                                                        }
 
-                                                       this.ctx.translate(xLabelValue, yLabelValue);
+                                                       this.ctx.translate(xLabelValue, yLabelValue + this.options.ticks.labelOffset);
                                                        this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
                                                        this.ctx.font = tickLabelFont;
                                                        this.ctx.textBaseline = "middle";
index 9b452515ec28c72aebff2af6d25df2a6477d4377..e7b9810621af087921eda49681d535b492edf365 100644 (file)
@@ -239,7 +239,8 @@ describe('Core helper tests', function() {
                                                display: true,
                                                callback: merged.scales.yAxes[1].ticks.callback, // make it nicer, then check explicitly below
                                                autoSkip: true,
-                                               autoSkipPadding: 0
+                                               autoSkipPadding: 0,
+                                               labelOffset: 0,
                                        },
                                        type: 'linear'
                                }, {
@@ -271,7 +272,8 @@ describe('Core helper tests', function() {
                                                display: true,
                                                callback: merged.scales.yAxes[2].ticks.callback, // make it nicer, then check explicitly below
                                                autoSkip: true,
-                                               autoSkipPadding: 0
+                                               autoSkipPadding: 0,
+                                               labelOffset: 0,
                                        },
                                        type: 'linear'
                                }]
index 4688f51d879df57ebbcf19d5371be113ee7010f0..a58e89afdb64ff87ba7672e613dc831e92ff27b5 100644 (file)
@@ -38,7 +38,8 @@ describe('Category scale tests', function() {
                                display: true,
                                callback: defaultConfig.ticks.callback,  // make this nicer, then check explicitly below
                                autoSkip: true,
-                               autoSkipPadding: 0
+                               autoSkipPadding: 0,
+                               labelOffset: 0
                        }
                });
 
index afcce0af2fa83a8d750a64dd7107303f343909f3..7e572dcdcaf9753a96f7035c32539d6db3409a2c 100644 (file)
@@ -49,7 +49,8 @@ describe('Linear Scale', function() {
                                display: true,
                                callback: defaultConfig.ticks.callback, // make this work nicer, then check below
                                autoSkip: true,
-                               autoSkipPadding: 0
+                               autoSkipPadding: 0,
+                               labelOffset: 0
                        }
                });
 
index 3b01fd2404a319cc76b9f1f69abcece931d6de18..6c3724c7da4e3041caf657d3ab087f1d0276f18a 100644 (file)
@@ -44,7 +44,8 @@ describe('Logarithmic Scale tests', function() {
                                display: true,
                                callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
                                autoSkip: true,
-                               autoSkipPadding: 0
+                               autoSkipPadding: 0,
+                               labelOffset: 0
                        },
                });
 
index 2e0d7b6721f3487b9b2839dcb085063c7de52042..b1848c77ff936e424cf37c49770e9b09c900ab76 100644 (file)
@@ -63,7 +63,8 @@ describe('Test the radial linear scale', function() {
                                display: true,
                                callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below
                                autoSkip: true,
-                               autoSkipPadding: 0
+                               autoSkipPadding: 0,
+                               labelOffset: 0
                        },
                });
 
index 207a11a693fbd4a9298aaa697c7837aa2284ff5c..a361c64c5cfe434bbe4c684ac0f99754b1dcfc92 100644 (file)
@@ -71,7 +71,8 @@ describe('Time scale tests', function() {
                                display: true,
                                callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below,
                                autoSkip: false,
-                               autoSkipPadding: 0
+                               autoSkipPadding: 0,
+                               labelOffset: 0
                        },
                        time: {
                                parser: false,