Highlight a single bar on click in amcharts

Question

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

      "listeners": [{
           "event": "clickGraphItem",
           "method": function(event) {
               var node = event.item.columnGraphics.node.lastChild;
               node.setAttribute("stroke","#8198b4");
               node.setAttribute("fill","#8198b4");
     }
     }]

Any help? Thank You.

Answer 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 it
      if (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 it
      if (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%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="chartdiv"></div>