javascript - React.js: Stacked MultiBarChart of nvd3.js doesn't order layers correctly -

i'd use multibarchart , stacked option, haven't succeeded far.

modules use:

• nvd3 of version 1.8.2
• react-nvd3 of version 0.5.3

here's relevant code.

var props = {   type: "multibarchart",   datum: [{     key: "num",     values: [{ x: "a0", y: "5" },{ x: "a1", y: "5" },{ x: "a2", y: "5" },{ x: "a3", y: "5" }]   },{     key: "num2",     values: [{ x: "a0", y: "1" },{ x: "a1", y: "1" },{ x: "a2", y: "1" },{ x: "a3", y: "1" }]   },{     key: "num3",     values: [{ x: "a0", y: "2" },{ x: "a1", y: "2" },{ x: "a2", y: "2" },{ x: "a3", y: "2" }]   }],   containerstyle: {     width: 500,     height: 300   } };  ...  return (<div><nvd3chart {...props}/></div>); 

it works fine grouped option:

but doesn't work stacked option. last key num3 covers bars, should on sum of num1 , num2:

when hover 1 of them, num3 bar totally hides num1 , num2, , shows if value num3 itself:

does me out?

i've found cause. values of y fields should numerical in stacked mode.

should not be:

{   key: "num",   values: [{ x: "a0", y: "5" },{ x: "a1", y: "5" },{ x: "a2", y: "5" },{ x: "a3", y: "5" }] } 

but:

{   key: "num",   values: [{ x: "a0", y: 5 },{ x: "a1", y: 5 },{ x: "a2", y: 5 },{ x: "a3", y: 5 }] }