axis labels styling - Angular NVD3 - Line chart

Question

usage - Angular NVD3 LineChart

I am getting milliseconds, converting them to ('%H:%M') format to display on x-axis.

 xAxis: {
          tickFormat: function(d) {
          return d3.time.format('%H:%M')(new Date(d));
        },

The above works fine, and shows data in format 10:30.

i need to format it's styling, 10: in different color and 30 in different.

I wrote below Javascript,

 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 = '<span class="lightText">'+ xlabelB + '</span><span class="boldText">' + xlabelA + '</span>';
                            console.log(text);
                            return text;
     },

But the above is rendered inside <Text> tag, so it does not render html.

How can i achieve the same. Here is the plunker

Here is the generated html after formatting,

<text dy=".71em" y="10" transform="" style="text-anchor: middle;"><span class="lightText">10:</span><span class="boldText">30</span></text>

Before Formatting

<text dy=".71em" y="10" transform="" style="text-anchor: middle;">10:30</text>

Amudh Amudh · Accepted Answer · 2016-05-15T18:50:11

Did you mean to use tspan within text tags? Using tspan will allow you to format text separately like this example below

<svg>
  <g>
    <text dy=".71em" y="10" x="0" transform="" style="text-anchor: left;">
      <tspan style="fill:red;">10:</tspan>
      <tspan style="font-weight:bold;">30</tspan>
    </text>
  </g>
</svg>

Although, you would not be able to use html using the tickFormat function for axes. You would have to get handle of the chart (using d3) and build your own axis, I believe.

axis labels styling - Angular NVD3 - Line chart

1 Answers