Search code examples
d3.jsaxisnvd3.jsrotatetransform

nvd3.js x-axis not rotating all tick labels after chart re-render


I have a nvd3 chart where i group data by day, week or month. When i have have a low number of values in the x-axis i don't rotate the axis label, but if i have a lager amount of ticks i rotate them so they don't overlap. My problem is that when i have a chart grouped by Week with the tick labels rotated and change it to group by month most of the labels become horizontal as expected, except one. If i play with the dates i see that i get the problem always with the month February 2016 or December 2014. If i go to group by month from the day grouping, or if i refresh the page the chart is shown as expected. See the images below: chart by week, chart by month

Does anyone have a clue why do i have this kind of issue?


Solution

  • Well i found a solution to the problem. in the file nv.d3 in the axis chart function of nv.models.axis there is an if statement that is run when labels are set to be rotated (if (rotateLabels % 360){...}). But if the labels are not set to rotate there is no code to explicitly set this, so i added an else statement in that if statement that sorted the issue:

    else {
      xTicks
      .attr('transform', 'rotate(0)')
      .style('text-anchor', 'middle');
    }