Search code examples
d3.jsnvd3.jsaxis-labels

x-axis labels not displaying fully

I know this is probably the worst code ever written but please bear with me, I really don't get the hang of D3 (yet).

So I have the following graph https://jsfiddle.net/El4a/sfu07q67/6/

containing a lot of hacky code. What I need is to display the last 12 months of data, with the final displayed month being the current month. So in this case (it's April) the x-axis ranges from may (2015) to april (2016). Like thus :

enter image description here

The data on the graph displays correctly, so far so goed.

The labels however are being a real pain. I've got them nearly good, but for some oddball reason the oldest (may) and current (april) month do not get displayed.

I'm kinda sorting the names of the months in the right order :

    var months = ["Jan", "Feb", "Maa", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

var x = [];
for (var i = 0; i < timePeriod.length; i++) {
  if (timePeriod[i] === 0) {
    x.push(months[timePeriod[i]]);
  }
  else {
    x.push(months[timePeriod[i]-1]);
  }
}; 

//result : ["Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec", "Jan", "Feb", "Maa", "Apr"]

And then trying to paste them on the graph :

    var count = 0;  
chart.xAxis
.axisLabel('Month')  
.tickValues([1,2,3,4,5,6,7,8,9,10,11,12])
.tickFormat(function(d) {  
  var label = x[count];  
  count++;
  return label;   
});

Can anyone help me out?

Solution

  • The problem is with your tickFormat implementation for the xAxis. For some reason, your count variable runs from 0 to 13 and when you access x the last two times, 12 and 13, the return value is undefined.

    Change your tickFormat function to the following and it should work:

    .tickFormat(function(d) {  
  return x[d-1];       
 });

    Note the d-1.