Add title.position/title.padding and remove title.x/title.y - #1025 #1021

c3.css

@@ -90,6 +90,10 @@
   stroke: lightgray;
   stroke-width: 1; }
 
+/*-- Title --*/
+.c3-title {
+  font: 14px sans-serif; }
+
 /*-- Tooltip --*/
 .c3-tooltip-container {
   z-index: 10; }

c3.js

@@ -1213,8 +1213,13 @@
             tooltip_init_position: {top: '0px', left: '50px'},
             // title
             title_text: undefined,
-            title_x: 0,
+            title_padding: {
-            title_y: 0
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0
+            },
+            title_position: 'top-center',
         };
 
         Object.keys(this.additionalConfig).forEach(function (key) {
@@ -2685,11 +2690,6 @@
         return Math.max(0, this.xAxis.tickInterval());
     };
 
-    c3_chart_internal_fn.getTitlePadding = function() {
-        var $$ = this;
-        return $$.config.title_y + $$.title.node().getBBox().height;
-    };
-
     c3_chart_internal_fn.getShapeIndices = function (typeFilter) {
         var $$ = this, config = $$.config,
             indices = {}, i = 0, j, k;
@@ -4168,17 +4168,34 @@
         var $$ = this;
         $$.title = $$.svg.append("text")
               .text($$.config.title_text)
-              .attr("class", "c3-chart-title")
+              .attr("class", $$.CLASS.title);
-              .attr("x", $$.config.title_x)
-              .attr("y", $$.config.title_y);
     };
-
     c3_chart_internal_fn.redrawTitle = function () {
         var $$ = this;
         $$.title
-              .attr("x", $$.config.title_x)
+              .attr("x", $$.xForTitle.bind($$))
-              .attr("y", $$.config.title_y || $$.title.node().getBBox().height);
+              .attr("y", $$.yForTitle.bind($$));
+    };
+    c3_chart_internal_fn.xForTitle = function () {
+        var $$ = this, config = $$.config, position = config.title_position || 'left', x;
+        if (position.indexOf('right') >= 0) {
+            x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right;
+        } else if (position.indexOf('center') >= 0) {
+            x = ($$.currentWidth - $$.title.node().getBBox().width) / 2;
+        } else { // left
+            x = config.title_padding.left;
+        }
+        return x;
+    };
+    c3_chart_internal_fn.yForTitle = function () {
+        var $$ = this;
+        return $$.config.title_padding.top + $$.title.node().getBBox().height;
     };
+    c3_chart_internal_fn.getTitlePadding = function() {
+        var $$ = this;
+        return $$.yForTitle() + $$.config.title_padding.bottom;
+    };
+
     function Axis(owner) {
         API.call(this, owner);
     }
@@ -5667,6 +5684,7 @@
         defocused: 'c3-defocused',
         region: 'c3-region',
         regions: 'c3-regions',
+        title: 'c3-title',
         tooltipContainer: 'c3-tooltip-container',
         tooltip: 'c3-tooltip',
         tooltipName: 'c3-tooltip-name',

c3.min.css

@@ -1 +1 @@
-.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}
+.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}

spec/title-spec.js

@@ -1,8 +1,10 @@
 describe('c3 chart title', function () {
     'use strict';
+
     var chart, config;
+
     describe('when given a title config option', function () {
-        describe('with no x or y value', function () {           
+        describe('with no padding and no position', function () {
             beforeEach(function(done) {
                 config = {
                     data: {
@@ -18,20 +20,20 @@ describe('c3 chart title', function () {
             });
 
             it('renders the title at the default config position', function () {
-                var titleEl = d3.select(".c3-chart-title");
+                var titleEl = d3.select(".c3-title");
-                expect(titleEl.attr("x")).toEqual('0');
+                expect(+titleEl.attr("x")).toBeCloseTo(294, -2);
-                expect(titleEl.attr("y")).toEqual(titleEl.node().getBBox().height.toString());
+                expect(+titleEl.attr("y")).toEqual(titleEl.node().getBBox().height);
             });
 
             it('renders the title text', function () {
-                var titleEl = d3.select(".c3-chart-title");
+                var titleEl = d3.select(".c3-title");
                 expect(titleEl.node().textContent).toEqual('new title');
             });
         });
 
-        describe('with x and y values', function () {           
+        describe('with padding', function () {
-            beforeEach(function(done) {
+            var config, getConfig = function (titlePosition) {
-                config = {
+                return {
                     data: {
                         columns: [
                             ['data1', 30, 200, 100, 400, 150, 250]
@@ -39,29 +41,58 @@ describe('c3 chart title', function () {
                     },
                     title: {
                         text: 'positioned title',
-                        x: 50,
+                        padding: {
-                        y: 10
+                            top: 20,
+                            right: 30,
+                            bottom: 40,
+                            left: 50
+                        },
+                        position: titlePosition
                     }
                 };
-                chart = window.initChart(chart, config, done);
+            };
-            });
 
-            it('renders the title at the default config position', function () {
+            describe('and position center', function () {
-                var titleEl = d3.select(".c3-chart-title");
+                beforeEach(function(done) {
-                expect(titleEl.attr("x")).toEqual('50');
+                    config = getConfig('top-center');
-                expect(titleEl.attr("y")).toEqual('10');
+                    chart = window.initChart(chart, config, done);
+                });
+                it('renders the title at the default config position', function () {
+                    var titleEl = d3.select(".c3-title");
+                    expect(+titleEl.attr("x")).toBeCloseTo(275, -2);
+                    expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
+                });
+                it('adds the correct amount of padding to fit the title', function() {
+                    expect(chart.internal.getCurrentPaddingTop()).toEqual(
+                        config.title.padding.top + d3.select('.c3-title').node().getBBox().height + config.title.padding.bottom
+                    );
+                });
             });
 
-            it('renders the title text', function () {
+            describe('and position left', function () {
-                var titleEl = d3.select(".c3-chart-title");
+                beforeEach(function(done) {
-                expect(titleEl.node().textContent).toEqual('positioned title');
+                    config = getConfig('top-left');
+                    chart = window.initChart(chart, config, done);
+                });
+                it('renders the title at the default config position', function () {
+                    var titleEl = d3.select(".c3-title");
+                    expect(+titleEl.attr("x")).toBeCloseTo(50, -1);
+                    expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
+                });
             });
 
-            it('adds the correct amount of padding to fit the title', function() {
+            describe('and position right', function () {
-                expect(chart.internal.getCurrentPaddingTop()).toEqual(
+                beforeEach(function(done) {
-                    config.title.y + d3.select('.c3-chart-title').node().getBBox().height
+                    config = getConfig('top-right');
-                );
+                    chart = window.initChart(chart, config, done);
+                });
+                it('renders the title at the default config position', function () {
+                    var titleEl = d3.select(".c3-title");
+                    expect(+titleEl.attr("x")).toBeCloseTo(520, -2);
+                    expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
+                });
             });
+
         });
     });
 });

src/class.js

@@ -26,6 +26,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
     defocused: 'c3-defocused',
     region: 'c3-region',
     regions: 'c3-regions',
+    title: 'c3-title',
     tooltipContainer: 'c3-tooltip-container',
     tooltip: 'c3-tooltip',
     tooltipName: 'c3-tooltip-name',

src/config.js

@@ -194,8 +194,13 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         tooltip_init_position: {top: '0px', left: '50px'},
         // title
         title_text: undefined,
-        title_x: 0,
+        title_padding: {
-        title_y: 0
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        },
+        title_position: 'top-center',
     };
 
     Object.keys(this.additionalConfig).forEach(function (key) {

src/scss/main.scss

@@ -46,6 +46,10 @@
 
 @import 'legend';
 
+/*-- Title --*/
+
+@import 'title';
+
 /*-- Tooltip --*/
 
 @import 'tooltip';

src/scss/title.scss

@@ -0,0 +1,3 @@
+.c3-title {
+  font: 14px sans-serif;
+}

src/size.js

@@ -107,8 +107,3 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
 c3_chart_internal_fn.getEventRectWidth = function () {
     return Math.max(0, this.xAxis.tickInterval());
 };
-
-c3_chart_internal_fn.getTitlePadding = function() {
-    var $$ = this;
-    return $$.config.title_y + $$.title.node().getBBox().height;
-};

src/title.js

@@ -2,14 +2,30 @@ c3_chart_internal_fn.initTitle = function () {
     var $$ = this;
     $$.title = $$.svg.append("text")
           .text($$.config.title_text)
-          .attr("class", "c3-chart-title")
+          .attr("class", $$.CLASS.title);
-          .attr("x", $$.config.title_x)
-          .attr("y", $$.config.title_y);
 };
-
 c3_chart_internal_fn.redrawTitle = function () {
     var $$ = this;
     $$.title
-          .attr("x", $$.config.title_x)
+          .attr("x", $$.xForTitle.bind($$))
-          .attr("y", $$.config.title_y || $$.title.node().getBBox().height);
+          .attr("y", $$.yForTitle.bind($$));
+};
+c3_chart_internal_fn.xForTitle = function () {
+    var $$ = this, config = $$.config, position = config.title_position || 'left', x;
+    if (position.indexOf('right') >= 0) {
+        x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right;
+    } else if (position.indexOf('center') >= 0) {
+        x = ($$.currentWidth - $$.title.node().getBBox().width) / 2;
+    } else { // left
+        x = config.title_padding.left;
+    }
+    return x;
+};
+c3_chart_internal_fn.yForTitle = function () {
+    var $$ = this;
+    return $$.config.title_padding.top + $$.title.node().getBBox().height;
+};
+c3_chart_internal_fn.getTitlePadding = function() {
+    var $$ = this;
+    return $$.yForTitle() + $$.config.title_padding.bottom;
 };