diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index f072cb6674b..89fca80490f 100644
--- a/docs/configuration/title.md
+++ b/docs/configuration/title.md
@@ -7,6 +7,7 @@ The title configuration is passed into the `options.title` namespace. The global
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
+| `align` | `string` | `'center'` | Alignment of the title. [more...](#align)
| `display` | `boolean` | `false` | Is the title shown?
| `position` | `string` | `'top'` | Position of title. [more...](#position)
| `fontSize` | `number` | `12` | Font size.
@@ -24,6 +25,14 @@ Possible title position values are:
* `'bottom'`
* `'right'`
+## Align
+
+Alignment of the title. Options are:
+
+* `'start'`
+* `'center'`
+* `'end'`
+
## Example Usage
The example below would enable a title of 'Custom Chart Title' on the chart that is created.
diff --git a/samples/samples.js b/samples/samples.js
index d95a3fe7e4f..c85cac37a4d 100644
--- a/samples/samples.js
+++ b/samples/samples.js
@@ -167,6 +167,12 @@
title: 'Callbacks',
path: 'legend/callbacks.html'
}]
+ }, {
+ title: 'Title',
+ items: [{
+ title: 'Alignment',
+ path: 'title/alignment.html'
+ }]
}, {
title: 'Tooltip',
items: [{
diff --git a/samples/title/alignment.html b/samples/title/alignment.html
new file mode 100644
index 00000000000..770db6a3513
--- /dev/null
+++ b/samples/title/alignment.html
@@ -0,0 +1,143 @@
+
+
+
+
+ Title Positions & Alignment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index 452f921e7a4..9a25699ef1a 100644
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -6,6 +6,7 @@ const helpers = require('../helpers/index');
const layouts = require('../core/core.layouts');
defaults._set('title', {
+ align: 'center',
display: false,
fontStyle: 'bold',
fullWidth: true,
@@ -128,35 +129,64 @@ class Title extends Element {
// Actually draw the title block on the canvas
draw() {
- var me = this;
- var ctx = me.ctx;
- var opts = me.options;
+ const me = this;
+ const ctx = me.ctx;
+ const opts = me.options;
if (!opts.display) {
return;
}
- var fontOpts = helpers.options._parseFont(opts);
- var lineHeight = fontOpts.lineHeight;
- var offset = lineHeight / 2 + me._padding.top;
- var rotation = 0;
- var top = me.top;
- var left = me.left;
- var bottom = me.bottom;
- var right = me.right;
- var maxWidth, titleX, titleY;
+ const fontOpts = helpers.options._parseFont(opts);
+ const lineHeight = fontOpts.lineHeight;
+ const offset = lineHeight / 2 + me._padding.top;
+ let rotation = 0;
+ const top = me.top;
+ const left = me.left;
+ const bottom = me.bottom;
+ const right = me.right;
+ let maxWidth, titleX, titleY;
+ let align;
ctx.fillStyle = helpers.valueOrDefault(opts.fontColor, defaults.fontColor); // render in correct colour
ctx.font = fontOpts.string;
// Horizontal
if (me.isHorizontal()) {
- titleX = left + ((right - left) / 2); // midpoint of the width
+ switch (opts.align) {
+ case 'start':
+ titleX = left;
+ align = 'left';
+ break;
+ case 'end':
+ titleX = right;
+ align = 'right';
+ break;
+ default:
+ titleX = left + ((right - left) / 2);
+ align = 'center';
+ break;
+ }
+
titleY = top + offset;
maxWidth = right - left;
} else {
titleX = opts.position === 'left' ? left + offset : right - offset;
- titleY = top + ((bottom - top) / 2);
+
+ switch (opts.align) {
+ case 'start':
+ titleY = opts.position === 'left' ? bottom : top;
+ align = 'left';
+ break;
+ case 'end':
+ titleY = opts.position === 'left' ? top : bottom;
+ align = 'right';
+ break;
+ default:
+ titleY = top + ((bottom - top) / 2);
+ align = 'center';
+ break;
+ }
maxWidth = bottom - top;
rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5);
}
@@ -164,7 +194,7 @@ class Title extends Element {
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
- ctx.textAlign = 'center';
+ ctx.textAlign = align;
ctx.textBaseline = 'middle';
var text = opts.text;
diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js
index 66b9d0f9094..084285599fe 100644
--- a/test/specs/plugin.title.tests.js
+++ b/test/specs/plugin.title.tests.js
@@ -5,6 +5,7 @@ var Title = Chart.plugins.getAll().find(p => p.id === 'title')._element;
describe('Title block tests', function() {
it('Should have the correct default config', function() {
expect(Chart.defaults.title).toEqual({
+ align: 'center',
display: false,
position: 'top',
fullWidth: true,