Chart Title Alignment

Author: Alex Vinober

src/components/colorbar/draw.js

@@ -172,8 +172,8 @@ module.exports = function draw(gd, id) {
                 tickprefix: opts.tickprefix,
                 showticksuffix: opts.showticksuffix,
                 ticksuffix: opts.ticksuffix,
-                title: opts.title,
-                titlefont: opts.titlefont,
+                title: opts.title.text,
+                titlefont: opts.title.font,
                 showline: true,
                 anchor: 'free',
                 position: 1

src/components/titles/index.js

@@ -63,18 +63,18 @@ Titles.draw = function(gd, titleClass, options) {
     var group = options.containerGroup;
 
     var fullLayout = gd._fullLayout;
-    var font = cont.titlefont.family;
-    var fontSize = cont.titlefont.size;
-    var fontColor = cont.titlefont.color;
+    var font = typeof cont.title.text !== 'undefined' ? cont.title.font.family : cont.titlefont.family;
+    var fontSize = typeof cont.title.text !== 'undefined' ? cont.title.font.size : cont.titlefont.size;
+    var fontColor = typeof cont.title.text !== 'undefined' ? cont.title.font.color : cont.titlefont.color;
 
     var opacity = 1;
     var isplaceholder = false;
-    var txt = cont.title.trim();
+    var txt = typeof cont.title.text !== 'undefined' ? cont.title.text.trim() : cont.title.trim();
 
     // only make this title editable if we positively identify its property
     // as one that has editing enabled.
     var editAttr;
-    if(prop === 'title') editAttr = 'titleText';
+    if(prop === 'title.text') editAttr = 'titleText';
     else if(prop.indexOf('axis') !== -1) editAttr = 'axisTitleText';
     else if(prop.indexOf('colorbar' !== -1)) editAttr = 'colorbarTitleText';
     var editable = gd._context.edits[editAttr];

src/plot_api/plot_api.js

@@ -563,7 +563,7 @@ function plotPolar(gd, data, layout) {
 
     // editable title
     var opacity = 1;
-    var txt = gd._fullLayout.title;
+    var txt = gd._fullLayout.title.text;
     if(txt === '' || !txt) opacity = 0;
 
     var titleLayout = function() {
@@ -597,7 +597,7 @@ function plotPolar(gd, data, layout) {
         var setContenteditable = function() {
             this.call(svgTextUtils.makeEditable, {gd: gd})
                 .on('edit', function(text) {
-                    gd.framework({layout: {title: text}});
+                    gd.framework({layout: {title: {text: text}}});
                     this.text(text)
                         .call(titleLayout);
                     this.call(setContenteditable);

src/snapshot/cloneplot.js

@@ -25,7 +25,9 @@ function cloneLayoutOverride(tileClass) {
                 autosize: true,
                 width: 150,
                 height: 150,
-                title: '',
+                title: {
+                    text: ''
+                },
                 showlegend: false,
                 margin: {l: 5, r: 5, t: 5, b: 5, pad: 0},
                 annotations: []
@@ -34,7 +36,9 @@ function cloneLayoutOverride(tileClass) {
 
         case 'thumbnail':
             override = {
-                title: '',
+                title: {
+                    text: ''
+                },
                 hidesources: true,
                 showlegend: false,
                 borderwidth: 0,

test/image/mocks/14.json

@@ -97,12 +97,15 @@
         }
     ], 
     "layout": {
-        "title": "Silicon Photovoltaics Learning Curve", 
-        "titlefont": {
-            "color": "", 
-            "family": "", 
-            "size": 0
-        }, 
+        "title": {
+            "text": "test",
+            "alignment": "left",
+            "font": {
+                "color": "",
+                "family": "",
+                "size": 0
+            }
+        },
         "font": {
             "family": "Arial, sans-serif", 
             "size": 12, 

test/jasmine/tests/snapshot_test.js

@@ -35,7 +35,9 @@ describe('Plotly.Snapshot', function() {
 
         data = [dummyTrace1, dummyTrace2];
         layout = {
-            title: 'Chart Title',
+            title: {
+                text: 'Chart Title'
+            },
             showlegend: true,
             autosize: true,
             width: 688,
@@ -69,7 +71,9 @@ describe('Plotly.Snapshot', function() {
                 autosize: true,
                 width: 150,
                 height: 150,
-                title: '',
+                title: {
+                    text: ''
+                },
                 showlegend: false,
                 margin: {'l': 5, 'r': 5, 't': 5, 'b': 5, 'pad': 0},
                 annotations: []

test/jasmine/tests/titles_test.js

@@ -83,7 +83,9 @@ describe('editable titles', function() {
         Plotly.plot(gd, data, {
             xaxis: {title: ''},
             yaxis: {title: ''},
-            title: ''
+            title: {
+                text: ''
+            }
         }, {editable: true})
         .then(function() {
             return Promise.all([
@@ -99,7 +101,9 @@ describe('editable titles', function() {
         Plotly.plot(gd, data, {
             xaxis: {title: ''},
             yaxis: {title: ''},
-            title: ''
+            title: {
+                text: ''
+            }
         }, {editable: true})
         .then(function() {
             return editTitle('x', 'xaxis.title', 'XXX');
@@ -108,7 +112,7 @@ describe('editable titles', function() {
             return editTitle('y', 'yaxis.title', 'YYY');
         })
         .then(function() {
-            return editTitle('g', 'title', 'TTT');
+            return editTitle('g', 'title.text', 'TTT');
         })
         .then(function() {
             return Promise.all([

test/jasmine/tests/validate_test.js

@@ -18,7 +18,9 @@ describe('Plotly.validate', function() {
             type: 'scatter',
             x: [1, 2, 3]
         }], {
-            title: 'my simple graph'
+            title: {
+                text: 'my simple graph'
+            }
         });
 
         expect(out).toBeUndefined();
@@ -362,7 +364,9 @@ describe('Plotly.validate', function() {
                 }]
             }),
         ], {
-            title: 'my transformed graph'
+            title: {
+                text: 'my transformed graph'
+            }
         });
 
         expect(out.length).toEqual(5);