diff --git a/docs/graph2d.html b/docs/graph2d.html
index 44cee1e1..ae919d0b 100644
--- a/docs/graph2d.html
+++ b/docs/graph2d.html
@@ -464,6 +464,30 @@ The options colored in green can also be used as options for the groups. All opt
true
Show or hide the data axis.
+
+
dataAxis.title.left.text
+
String
+
undefined
+
Set the title for the left axis.
+
+
+
dataAxis.title.left.style
+
String
+
undefined
+
Set the title style for the left axis. This is a css string and it will override the attributes set in the class.
+
+
+
dataAxis.title.right.text
+
String
+
undefined
+
Set the title for the right axis.
+
+
+
dataAxis.title.right.style
+
String
+
undefined
+
Set the title style for the right axis. This is a css string and it will override the attributes set in the class.
+
groups.visibility
Object
diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html
new file mode 100644
index 00000000..fb12f461
--- /dev/null
+++ b/examples/graph2d/16_bothAxis_titles.html
@@ -0,0 +1,201 @@
+
+
+
+ Graph2d | Both Axis Example
+
+
+
+
+
+
+
+
Graph2d | Axis Title Example
+
+
+
+
+ This example shows setting a title for the left and right axes. Optionally the example allows the user
+ to show icons and labels on the left and right axis.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 17fe0d80..74db1a5e 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@@ -31,6 +31,10 @@ function DataAxis (body, options, svg, linegraphOptions) {
left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined}
},
+ title: {
+ left: {text:undefined},
+ right: {text:undefined}
+ },
format: {
left: {decimals: undefined},
right: {decimals: undefined}
@@ -42,7 +46,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
this.props = {};
this.DOMelements = { // dynamic elements
lines: {},
- labels: {}
+ labels: {},
+ title: {}
};
this.dom = {};
@@ -113,6 +118,7 @@ DataAxis.prototype.setOptions = function (options) {
'width',
'visible',
'customRange',
+ 'title',
'format'
];
util.selectiveExtend(fields, this.options, options);
@@ -257,7 +263,7 @@ DataAxis.prototype.redraw = function () {
var showMinorLabels = this.options.showMinorLabels;
var showMajorLabels = this.options.showMajorLabels;
- // determine the width and height of the elemens for the axis
+ // determine the width and height of the elements for the axis
props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
@@ -285,6 +291,8 @@ DataAxis.prototype.redraw = function () {
if (this.options.icons == true) {
this._redrawGroupIcons();
}
+
+ this._redrawTitle(orientation);
}
return changeCalled;
};
@@ -370,8 +378,14 @@ DataAxis.prototype._redrawLabels = function () {
this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
}
- var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
- // this will resize the yAxis to accomodate the labels.
+ // Note that title is rotated, so we're using the height, not width!
+ var titleWidth = 0;
+ if(this.options.title[orientation] !== undefined) {
+ titleWidth = this.props.titleCharHeight;
+ }
+ var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
+
+ // this will resize the yAxis to accommodate the labels.
if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
@@ -461,6 +475,36 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi
}
};
+/**
+ * Create a title for the axis
+ * @private
+ * @param orientation
+ */
+DataAxis.prototype._redrawTitle = function (orientation) {
+ DOMutil.prepareElements(this.DOMelements.title);
+
+ // Check if the title is defined for this axes
+ if(this.options.title[orientation] == undefined || this.options.title[orientation].text === undefined) {
+ return;
+ }
+ var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame);
+ title.className = 'yAxis title ' + orientation;
+ title.innerHTML = this.options.title[orientation].text;
+
+ // Add style - if provided
+ if(this.options.title[orientation].style !== undefined) {
+ util.addCssText(title, this.options.title[orientation].style);
+ }
+
+ if (orientation == 'left') {
+ title.style.left = this.props.titleCharHeight + 'px';
+ }
+ else {
+ title.style.right = this.props.titleCharHeight + 'px';
+ }
+
+ title.style.width = this.height + 'px';
+};
@@ -497,6 +541,19 @@ DataAxis.prototype._calculateCharSize = function () {
this.dom.frame.removeChild(measureCharMajor);
}
+
+ if (!('titleCharHeight' in this.props)) {
+ var textTitle = document.createTextNode('0');
+ var measureCharTitle = document.createElement('DIV');
+ measureCharTitle.className = 'yAxis title measure';
+ measureCharTitle.appendChild(textTitle);
+ this.dom.frame.appendChild(measureCharTitle);
+
+ this.props.titleCharHeight = measureCharTitle.clientHeight;
+ this.props.titleCharWidth = measureCharTitle.clientWidth;
+
+ this.dom.frame.removeChild(measureCharTitle);
+ }
};
/**
diff --git a/lib/timeline/component/css/dataaxis.css b/lib/timeline/component/css/dataaxis.css
index 1fe4d71d..279899d5 100644
--- a/lib/timeline/component/css/dataaxis.css
+++ b/lib/timeline/component/css/dataaxis.css
@@ -44,6 +44,48 @@
width: auto;
}
+.vis.timeline .dataaxis .yAxis.title{
+ position: absolute;
+ color: #4d4d4d;
+ white-space: nowrap;
+ bottom: 20px;
+ text-align: center;
+}
+
+.vis.timeline .dataaxis .yAxis.title.measure{
+ padding: 0px 0px 0px 0px;
+ margin: 0px 0px 0px 0px;
+ visibility: hidden;
+ width: auto;
+}
+
+.vis.timeline .dataaxis .yAxis.title.left {
+ bottom: 0px;
+ -webkit-transform-origin: left top;
+ -moz-transform-origin: left top;
+ -ms-transform-origin: left top;
+ -o-transform-origin: left top;
+ transform-origin: left bottom;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+
+.vis.timeline .dataaxis .yAxis.title.right {
+ bottom: 0px;
+ -webkit-transform-origin: right bottom;
+ -moz-transform-origin: right bottom;
+ -ms-transform-origin: right bottom;
+ -o-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);