Add style option for axis titles.

docs/graph2d.html

@@ -461,12 +461,24 @@ The options colored in green can also be used as options for the groups. All opt
   <td>undefined</td>
   <td>Set the title for the left axis.</td>
 </tr>
+<tr>
+  <td>dataAxis.title.left.style</td>
+  <td>String</td>
+  <td>undefined</td>
+  <td>Set the title style for the left axis. This is a css string and it will override the attributes set in the class.</td>
+</tr>
 <tr>
   <td>dataAxis.title.right.text</td>
   <td>String</td>
   <td>undefined</td>
   <td>Set the title for the right axis.</td>
 </tr>
+<tr>
+  <td>dataAxis.title.right.style</td>
+  <td>String</td>
+  <td>undefined</td>
+  <td>Set the title style for the right axis. This is a css string and it will override the attributes set in the class.</td>
+</tr>
 <tr>
   <td>groups.visibility</td>
   <td>Object</td>

examples/graph2d/16_bothAxis_titles.html

@@ -60,6 +60,10 @@
                     <td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
                     <td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
                 </tr>
+                <tr>
+                    <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
+                    <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
+                </tr>
             </table>
         </td>
     </tr>
@@ -166,7 +170,7 @@
     function showTitle(axes, show) {
         var title;
         if(show == true) {
-            title = {text: "Title (" + axes + " axes)"};
+            title = {text: "Title (" + axes + " axes)", style: "color: green;"};
         }
         else {
             title = false;
@@ -180,6 +184,19 @@
         }
     }
 
+    var colors=['red','green','blue','black','yellow','purple','pink'];
+    function styleTitle(axes) {
+        var title;
+        title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
+
+        if(axes == 'left') {
+            graph2d.setOptions({dataAxis: {title: {left: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {title: {right: title}}});
+        }
+    }
+
 </script>
 </body>
 </html>

lib/timeline/component/DataAxis.js

@@ -476,6 +476,12 @@ DataAxis.prototype._redrawTitle = function (orientation) {
   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';
   }