MultibarHorizontal Chart controls and legends not working as expected about angular-nvd3

[krispo]

Can you show me your js and html code?

[faisalferoz]

html code is:
<nvd3 options="options" data="data"></nvd3>

and controller has the following code:

$scope.options = {
    chart: {
      type: 'multiBarHorizontalChart',
      height: 300,
      margin: {
        top: 20,
        right: 20,
        bottom: 60,
        left: 55
      },
      x: function(d) {
        return d.name;
      },
      y: function(d) {
        return d.label;
      },
      showControls: true,
      showValues: false,
      transitionDuration: 500,
      valueFormat: function(d) {
        return d.toFixed();
      },
      xAxis: {
        showMaxMin: false
      },
      yAxis: {
        axisLabel: 'Counts',
        tickFormat: function(d) {
          return d.toFixed();
        }
      }
    }
  };

$scope.data = [
            {
                "key": "Series1",
                "color": "#d62728",
                "values": [
                    {
                        "label" : "Group A" ,
                        "value" : -1.8746444827653
                    } ,
                    {
                        "label" : "Group B" ,
                        "value" : -8.0961543492239
                    } ,
                    {
                        "label" : "Group C" ,
                        "value" : -0.57072943117674
                    } ,
                    {
                        "label" : "Group D" ,
                        "value" : -2.4174010336624
                    } ,
                    {
                        "label" : "Group E" ,
                        "value" : -0.72009071426284
                    } ,
                    {
                        "label" : "Group F" ,
                        "value" : -0.77154485523777
                    } ,
                    {
                        "label" : "Group G" ,
                        "value" : -0.90152097798131
                    } ,
                    {
                        "label" : "Group H" ,
                        "value" : -0.91445417330854
                    } ,
                    {
                        "label" : "Group I" ,
                        "value" : -0.055746319141851
                    }
                ]
            },
            {
                "key": "Series2",
                "color": "#1f77b4",
                "values": [
                    {
                        "label" : "Group A" ,
                        "value" : 25.307646510375
                    } ,
                    {
                        "label" : "Group B" ,
                        "value" : 16.756779544553
                    } ,
                    {
                        "label" : "Group C" ,
                        "value" : 18.451534877007
                    } ,
                    {
                        "label" : "Group D" ,
                        "value" : 8.6142352811805
                    } ,
                    {
                        "label" : "Group E" ,
                        "value" : 7.8082472075876
                    } ,
                    {
                        "label" : "Group F" ,
                        "value" : 5.259101026956
                    } ,
                    {
                        "label" : "Group G" ,
                        "value" : 0.30947953487127
                    } ,
                    {
                        "label" : "Group H" ,
                        "value" : 0
                    } ,
                    {
                        "label" : "Group I" ,
                        "value" : 0
                    }
                ]
            }
        ]

[faisalferoz]

My bower.json has these dependencies

"d3": "~3.4.11",
"nvd3": "~1.1.15-beta",
"angular-nvd3": "~0.0.8"

[krispo]

The "x" and "y" function definition don't match with data.
Change it to:

x: function(d) {
        return d.label;
      },
y: function(d) {
        return d.value;
      },

[faisalferoz]

oh my bad - even after that the control don't work as expected.

[krispo]

it is working in plunker)

[faisalferoz]

:) no worries i will debug it out to see whats happening.

[faisalferoz]

Found the issue - it isn't related to the directive or any of the nvd3, d3 code. nvd3 adds a disabled class over the control, legend that is clicked to act as a toggle. I had a disabled class in my css that was disabling the pointer-events which was causing all the issues. I fixed it up and things are working as expected.