--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Title Positions & Alignment</title>
+ <script src="../../dist/Chart.min.js"></script>
+ <script src="../utils.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="chart-container">
+ <canvas id="chart-title-top-start"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-title-top-center"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-title-top-end"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-title-left-start"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-title-left-center"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-title-left-end"></canvas>
+ </div>
+ </div>
+ <script>
+ var color = Chart.helpers.color;
+ function createConfig(titlePosition, titleAlignment, colorName) {
+ return {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [{
+ label: 'My First dataset',
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+ borderColor: window.chartColors[colorName],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ display: false,
+ },
+ scales: {
+ x: {
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ },
+ y: {
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }
+ },
+ title: {
+ align: titleAlignment,
+ display: true,
+ position: titlePosition,
+ text: 'Title Position: ' + titlePosition + ', Align: ' + titleAlignment
+ }
+ }
+ };
+ }
+
+ window.onload = function() {
+ [{
+ id: 'chart-title-top-start',
+ titleAlignment: 'start',
+ titlePosition: 'top',
+ color: 'red'
+ }, {
+ id: 'chart-title-top-center',
+ titleAlignment: 'center',
+ titlePosition: 'top',
+ color: 'orange'
+ }, {
+ id: 'chart-title-top-end',
+ titleAlignment: 'end',
+ titlePosition: 'top',
+ color: 'yellow'
+ }, {
+ id: 'chart-title-left-start',
+ titleAlignment: 'start',
+ titlePosition: 'left',
+ color: 'green'
+ }, {
+ id: 'chart-title-left-center',
+ titleAlignment: 'center',
+ titlePosition: 'left',
+ color: 'blue'
+ }, {
+ id: 'chart-title-left-end',
+ titleAlignment: 'end',
+ titlePosition: 'left',
+ color: 'purple'
+ }].forEach(function(details) {
+ var ctx = document.getElementById(details.id).getContext('2d');
+ var config = createConfig(details.titlePosition, details.titleAlignment, details.color);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
+</body>
+
+</html>
const layouts = require('../core/core.layouts');
defaults._set('title', {
+ align: 'center',
display: false,
fontStyle: 'bold',
fullWidth: true,
// 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);
}
ctx.save();
ctx.translate(titleX, titleY);
ctx.rotate(rotation);
- ctx.textAlign = 'center';
+ ctx.textAlign = align;
ctx.textBaseline = 'middle';
var text = opts.text;
projects / thirdparty / Chart.js.git / commitdiff
