Highlight A Single Bar On Click In Amcharts

I have a bar chart from amcharts. I need to highlight a single bar on click on bar. Current scenario is when I click multiple bar, all bars highlighted. Here is my code 'l

Solution 1:

Instead of modifying the node, use fillColorsField instead, which allows you to set/unset the currently selected column's highlight and allows you to go through the rest of the chart's data to make sure only one item is selected.

"graphs": [{
     // ..."fillColorsField": "selected"
  }],
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column"listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect itif (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]

Demo below:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "fillColorsField": "selected"
  }],
  "categoryField": "country",
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column"listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect itif (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<scriptsrc="//www.amcharts.com/lib/3/amcharts.js"></script><scriptsrc="//www.amcharts.com/lib/3/serial.js"></script><divid="chartdiv"></div>