nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over

Question

I'm new to this kind of forum and my English skills are not the best but I'll try to do my best :).

There is an example of a Line Chart with View Finder at nvd3 website. This is the one (examples\lineWithFocusChart.html, nvd3 zip package) which I have been working with during the last 2 days. I have made only one change to the example's format: I use dates in the X axis instead of normal numbers.

Here are my 2 questions:

1- How can i rotate all the ticks' labels in the x axis? My dates are too long (%x %X, day and time) and I want them rotated in oder to improve their viewing. I can only get 2 ticks rotated (the max and min, the edges, of the x axis). This is the code I modify inside the "switch (axis.orient())" block at nv.d3.js:

case 'bottom':
      axisLabel.enter().append('text').attr('class', 'axislabel')
          .attr('text-anchor', 'middle')
          .attr('y', 25);
      axisLabel
          .attr('x', scale.range()[1] / 2);
      if (showMaxMin) {
        var axisMaxMin = wrap.selectAll('g.axisMaxMin')
                       .data(scale.domain());
        axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
        axisMaxMin.exit().remove();
        axisMaxMin
            .attr('transform', function(d,i) {
              return 'translate(' + scale(d) + ',0)'
            })
          .select('text')

            .attr('dy', '.71em')
            .attr('y', axis.tickPadding())
            .attr('text-anchor', 'middle')
            .text(function(d,i) {
              return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d)
            })
            .attr('transform', 'rotate(45)')
            ;
        d3.transition(axisMaxMin)
            .attr('transform', function(d,i) {
              return 'translate(' + scale.range()[i] + ',0)'
            });
      }
      break;

As you can check i have placed .attr('transform', 'rotate(45)') as new attribute so the max and min ticks are rotated (axisMaxMin). I have tried this way (throughout the nv.d3.js file) with the other text elements that I think are associated with the x ticks but it doesnt work. Any idea? Where I have to put the transformation in order to show all the X labels rotated?

2- In the example, when you place the mouse over the line, no event is triggered to show the value (x,y) associated with the point. How can i show those values? I've tried to copy-paste the methods used in other examples where these values are showed but it doesnt work. Any idea?

Thanks for sharing your time and knowledge :D.

Hurlee

Answer 1

There was a recent update to nvd3 that makes rotating the x-axis tick labels really easy. There is now a function of the axis model called rotateLabels(degrees) that takes an integer and will rotate your xTick labels the specified number of degrees. To rotate all xTick labels 45 degrees back, you could use it like this:

var chart = nv.models.lineChart();
chart.xAxis.rotateLabels(-45);

Thomson

Note: this doesn't seem to work if you're also using: .staggerLabels(true) – Burnejones

This works for me now to rotate Angular NVD3 labels: xAxis: { rotateLabels: -45 }, – Togetherness