title: axis labels styling - Angular NVD3 - Line chart
body: <p>usage - Angular NVD3
  LineChart</p>
  
  <p>I am getting <code>milliseconds</code>, converting them to <code>('%H:%M')</code> format to display on x-axis.</p>
  
  <pre><code> xAxis: {
            tickFormat: function(d) {
            return d3.time.format('%H:%M')(new Date(d));
          },
  </code></pre>
  
  <p>The above works fine, and shows data in format <code>10:30</code>.</p>
  
  <p>i need to format it's styling, <code>10:</code> in different color and <code>30</code> in different.</p>
  
  <p><strong>I wrote below Javascript,</strong></p>
  
  <pre><code> xAxis: {
            axisLabel: '',
            tickFormat: function(d) {
            var xlabel =  d3.time.format('%H:%M')(new Date(d));
            var xlabelB = xlabel.substring(0, 3);
            var xlabelA = xlabel.substring(3, 5);
            var text = '&lt;span class="lightText"&gt;'+ xlabelB + '&lt;/span&gt;&lt;span class="boldText"&gt;' + xlabelA + '&lt;/span&gt;';
                              console.log(text);
                              return text;
       },
  </code></pre>
  
  <p>But the above is rendered inside <code>&lt;Text&gt; tag</code>, so it does not render html.</p>
  
  <p>How can i achieve the same. Here is the <a href="http://plnkr.co/edit/WmnP9CApQ6Mj19aHFePL?p=preview" rel="nofollow">plunker</a></p>
  
  <p><strong>Here is the generated html after formatting,</strong></p>
  
  <pre><code>&lt;text dy=".71em" y="10" transform="" style="text-anchor: middle;"&gt;&lt;span class="lightText"&gt;10:&lt;/span&gt;&lt;span class="boldText"&gt;30&lt;/span&gt;&lt;/text&gt;
  </code></pre>
  
  <p><strong>Before Formatting</strong></p>
  
  <pre><code>&lt;text dy=".71em" y="10" transform="" style="text-anchor: middle;"&gt;10:30&lt;/text&gt;
  </code></pre>