Not all ticks showing up in nvd3 line chart

Question

I am trying to create a line chart.

Specifying ticks: 7 for a lineChart, but only 6 ticks are showing up.

This is the data and option values

this.options = {
      chart: {
        type: 'lineChart',
        showYAxis:false,
        showLabels:true,
        showLegend:false,
        reduceXTicks: false,
        margin : {
          top: 20,
          right: 20,
          bottom: 40,
          left:20
        },
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        xAxis: {
          tickFormat:function(d) { 
            return d3.time.format('%b %d')(new Date(d)); 
          },
          ticks:7
        }
      }
    };

    this.data=[
      {
        values: [    
        {x: new Date('2015-03-23'),y:10},
        {x:new Date('2015-03-24'),y:20},
        {x:new Date('2015-03-25'),y:5},
        {x: new Date('2015-03-26'),y:10},
        {x:new Date('2015-03-27'),y:15},
        {x:new Date('2015-03-28'),y:20},
        {x:new Date('2015-03-29'),y:40}
        ],
        key: 'Cosine Wave',
        color: '#d0021c',
        area:true
      }
    ]

See the plunker -https://plnkr.co/edit/7zg62ezs730i40U0GTHy?p=preview

Any help would be appreciated.

In the plunker I can see 7 ticks. So either it is now fixed or something else. I found your post for the exact same problem. I am using Angular 1 with Krispo nvd3 and I can only see 4 ticks instead of 8. — Shnigi, Dec 22 '17 at 12:27
I understood that you mean tooltip ticks, that is fine but the date ticks are not showing properly. At least changing ticks:8 will show you more ticks, but then some dates are doubled. — Shnigi, Dec 28 '17 at 12:14
I'm talking about the date ticks only, no date is doubled. What are you referring to ? — Abhay Srivastav, Dec 29 '17 at 06:37

score 0 · Answer 1 · answered Dec 28 '17 at 13:51

0

One workaround I found is that you set the ticks with tickValues.

var xAxis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues

Or then you can pass the tick values to the directive:

<nvd3-line-chart  
  data="graphData"   
  xAxisTickValues="xAxisTicks"  
</nvd3-line-chart>

and then in scope:

$scope.xAxisTicks = function(){  
    return [new Date('2013-12-31'), new Date('2014-1-1'), new Date('2014-1-2')];  
  }

Also notice this "tick arguments will still be passed to the scale’s tickFormat function if a tick format is not also set"

answered Dec 28 '17 at 13:51

Shnigi

972
9
19

doesn't work `Can't bind to 'xAxisTickValues' since it isn't a known property of 'nvd3'` – Abhay Srivastav Dec 29 '17 at 06:54
Isn't it this one? https://stackoverflow.com/questions/32321185/how-to-force-nvd3-to-display-the-equal-number-of-ticks-as-that-of-the-values-plo – Shnigi Dec 29 '17 at 12:14
Hey, can you please update the fiddle, would be much help, Thanks. – Abhay Srivastav Dec 30 '17 at 01:11

Not all ticks showing up in nvd3 line chart

1 Answers1