How to get Label name of bar on click?

Question

How to get label name on click of bar. I'm using NVD3 Graph. this is the reference link of NVD3 chart chart link: link

This way I'm bind the click event of bar chart example link: link

var newarraydata = [];
    d3.json('http://developers.nncinfotech.com/betafishfront-aj/guser_data/591574b7e4365e0004356c3f_product.json', function(data) {
        nv.addGraph(function() {
            ///console.log(data);
            var chart = nv.models.multiBarHorizontalChart()
                .x(function(d) { newarraydata[d.label] = d.ProductName; return d.label })
                .y(function(d) {  return d.value })
                .margin({top: 10, right: 45, bottom: 25, left: 70})
                .showValues(true)           //Show bar value next to each bar.
                .tooltips(true)             //Show tooltips on hover.
                .tooltipContent(function(d, y, e, graph) {
                    
                    return '<div style="position: relative;text-align: left;"><h5 style="text-align: center;padding: 5px;">Products</h5> <hr style="width: 90%;margin: 0 auto;text-align: center;"><p style="text-align: left;"> ' +  newarraydata[y].replace(/,/g, ", <br>") + '</p></div>'


                })

                .transitionDuration(350)
                .showControls(false);        //Allow user to switch between "Grouped" and "Stacked" mode.
            chart.valueFormat(d3.format('d'));
            d3.select('#modal_product_chart svg')
                .datum(data)
                .call(chart);
            nv.utils.windowResize(chart.update);
            return chart;
        },function(){
            d3.selectAll(".nv-bar.positive").on('click',
                function(){
                    //console.log($(this));
                    //here I want that bar label name 
                });
        });
    });

<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
 <div id="chart1">
  <svg width=600 height=500></svg>
</div>

You should really create a snippet of your code and show us what you have tried yourself, just throwing a few links to plugins and code don't show much. — Carsten Løvbo Andersen, May 22 '17 at 11:37
@CarstenLøvboAndersen Code has been snippet but I'm getting error — Rushil K. Pachchigar, May 22 '17 at 11:50
There is no point of deleting your coming and then add my name 2 min after, i read it the first time. — Carsten Løvbo Andersen, May 22 '17 at 11:51

Gilsha · Accepted Answer · 2017-05-22T12:35:11.490

Try this way.

d3.selectAll(".nv-bar")
    .on('click',
      function(el) {
        console.log(el.label);
      });

var data = [{
    "key": "Series 1",
    "color": "#d67777",
    "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": "Series 2",
    "color": "#4f99b4",
    "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
      }
    ]
  }
];
nv.addGraph(function() {
  var chart = nv.models.multiBarHorizontalChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .margin({
      top: 30,
      right: 20,
      bottom: 50,
      left: 175
    })
    .showValues(true) //Show bar value next to each bar.
    .tooltips(true) //Show tooltips on hover.
    .transitionDuration(350)
    .showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.

  chart.yAxis
    .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 svg')
    .datum(data)
    .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
}, function() {
  d3.selectAll(".nv-bar")
    .on('click',
      function(el) {
        console.log(el.label);
      });
});

<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
 <div id="chart1">
  <svg width=600 height=500></svg>
</div>

score 0 · Answer 2 · answered May 22 '17 at 12:22

chart.multibar.dispatch.on('elementClick', function(e){
  console.log(e.point['label']);
  refreshChart();
});

Put this above refreshChart and remove your click function code

Refer this link

https://coderwall.com/p/08wc2g/bind-on-click-events-in-nvd3-js-charts

How to get Label name of bar on click?

2 Answers2