From f82b32c0cf5d8a37ec8b162e3d15263afecd3f22 Mon Sep 17 00:00:00 2001
From: Chris Jackson <chris@cd-jackson.com>
Date: Sat, 1 Nov 2014 14:26:47 +0000
Subject: [PATCH] Add style option for axis titles.

---
 docs/graph2d.html                        | 12 ++++++++++++
 examples/graph2d/16_bothAxis_titles.html | 19 ++++++++++++++++++-
 lib/timeline/component/DataAxis.js       |  6 ++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/docs/graph2d.html b/docs/graph2d.html
index b0acaccc..bed34536 100644
--- a/docs/graph2d.html
+++ b/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>
diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html
index 76cf6391..bc073c7a 100644
--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/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>
\ No newline at end of file
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 4f428a51..f80025b8 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/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';
   }