How to show all x-axis values in nvd3

Question

I have a line chart by nvd3

Here is my code:

var categories = color.domain().map(function(name) {
    return {
      key: name,
      values: data.map(function(d) {
        return {
          seme: d.Semester, 
          stat: d[name],
           area: true 
          };
      })
    };
  }); // end of categories

    nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .x(function(d) { return parseFloat(d.seme); })
      .y(function(d) { return parseFloat(d.stat); }) 
      .color(['#ffbb78', '#ff7f0e', '#aec7e8', '#1f77b4'])
                .margin({left: 100})
                .transitionDuration(350)
                .showLegend(true)
                .showYAxis(true) 
                .showXAxis(true)
                 .width(width).height(height);
   chart.isArea(true);

This is my graph:

I want all semester values to appear, so how can I force the x-axis to show all values of semester?

I tried this one

chart.xAxis.axisLabel("Semester")
    .showMaxMin(false)    
    .tickValues(function(d) { return parseFloat(d.seme); })
    .tickFormat(d3.format(',f'));

and here what I have got:

use tickValues as answered here http://stackoverflow.com/questions/26624430/nvd3-line-chart-x-axis-ticks-are-missing — Cyril Cherian, Jun 04 '16 at 08:53
this should return an array `.tickValues(function(d) { return parseFloat(d.seme); })` you are returning a single value. You should return array of semesters. — Cyril Cherian, Jun 06 '16 at 02:41

score 1 · Answer 1 · answered Apr 27 '17 at 19:01

1

Sometimes only showMaxMin:false won't work . Along with that specify

xAxis: { ticks:value } where value is the number of datapoints to be shown. I had to show 10 data points,so below worked for me.

xAxis: {ticks:10,showMaxMin:false}

answered Apr 27 '17 at 19:01

Dwarkamoye

37
2

How to show all x-axis values in nvd3

1 Answers1