MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?

Question

Data:

nvd3TestData = [
      {
        values:[
          {x:"M",y:1},
          {x:"T",y:2},
          {x:"W",y:3},
          {x:"R",y:3},
          {x:"F",y:4},
          {x:"S",y:5},
          {x:"U",y:6}
        ],
        key:"Apples"
      },
      {
        values:[
          {x:"M",y:5},
          {x:"T",y:2},
          {x:"W",y:6},
          {x:"R",y:8},
          {x:"F",y:2},
          {x:"S",y:4},
          {x:"U",y:1}
        ],
        key:"Zebras"
      }
    ]

Creating the chart (pulled from an angularjs directive):

nv.addGraph -> chart = nv.models.multiBarChart() .stacked(true) .showControls(false)

chart.xAxis
  .axisLabel(attrs.xAxisLabel)

chart.yAxis
  .axisLabel(attrs.yAxisLabel)
  .tickFormat(d3.format(',r'))


console.log element


d3.select(element[0].children[0])
  .datum(nvd3TestData)
  .call(chart)

nv.utils.windowResize(chart.update)

Output:

Output

Expected output would have all 7 labels: M T W R F S U

score 26 · Accepted Answer · answered Jun 14 '13 at 06:09

26

I looked on nvd3.org and couldn't find any real documentation, but checking the source, I found https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js which showed a boolean chart parameter of "reduceXTicks" with a comment indicating it would do what you want. I tried it out with one of the example charts and it worked. Specifically, I used:

chart
   .reduceXTicks(true)

answered Jun 14 '13 at 06:09

Peter Alfvin

26,897
7
60
98

Thanks! Not sure how I missed that when I looked over the source. – Z Jones Jun 14 '13 at 13:46
8

I think you meant `.reduceXTicks(false)` – mqklin Dec 28 '15 at 06:27
This works, but for my case, the labels are overlapping each other :-( – Casperonian Apr 30 '16 at 09:02
1

@Casperonian stagger them? – Andrew Feb 25 '19 at 18:48

score 2 · Answer 2 · answered Apr 27 '17 at 17:58

2

There is no proper documentation, but you can acheive it. Just add the below line to your chart reduceXTicks: false

Rest will follow. Thanks

answered Apr 27 '17 at 17:58

Dwarkamoye

37
2

MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?

2 Answers2

Linked