CODEWITHSUNDEEP
d3.jsnvd3.js
user1855009
user1855009

Reputation: 971

Output text labels on NVD3 Stacked/Grouped Multibar Chart

Here's the link to the chart example: http://nvd3.org/ghpages/multiBar.html

I've been able to switch out the plotted values for data that I provided. Ex:

datapoints = [ 
  {
    key: "Series1",
    color : "#62CCF1",
    values: [
  { 
    "label" : "Group A" ,
    "value" : 507
  } , 
  { 
    "label" : "Group B" , 
    "value" : 436
  } ,
  { 
    "label" : "Group C" ,
    "value" : 346
  } ,
  { 
    "label" : "Group D" ,
    "value" : 343
  } 
    ]
  }
];

But for some reason instead of outputting "Group X" on the x axis, labeling each bar, I'm only getting NaN. I know that this is related to the provided chart js since the original example generates numbers for the x axis. I have scoured the js files but can't find the corresponding place to edit this. I tried adding this:

nv.addGraph(function() {
  var chart = nv.models.multiBarChart()
  .x(function(d) { return d.label }) //this part specifically
  .y(function(d) { return d.value })

But didn't have any luck.

Upvotes: 0

Views: 2472

Answers (1)

shabeer90
shabeer90

Reputation: 5151

The values[] must be X and Y point to be plotted in the chart. You need either to rename the label and value attributes to x and y or you need to create functions to provide those values.

Just Rename "label" as X and value as Y

Here is another question which had a similar data structure like yours.

Hope it helps

Upvotes: 1

Related Questions