Toggling active state of a bullet

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can toggle "active" state of a bullet by clicking on it.

It works by creating an "active" state for the bullet's circle. This state is triggered on clicked objects if they have their toggleKey: "active" set.

circle.states.create("active", {
  radius: 10
});

circle.states.create("active", {
  radius: 10
});

It also uses an event to monitor changes for bullet circle's active setting, to reset it on a previously "activated" bullet.

circle.on("active", function(active, target) {
  if (currentActiveBullet) {
    currentActiveBullet.set("active", false);
  }
  if (active) {
    currentActiveBullet = target;
  }
  else {
    currentActiveBullet = undefined;
  }
});

circle.on("active", function(active, target) {
  if (currentActiveBullet) {
    currentActiveBullet.set("active", false);
  }
  if (active) {
    currentActiveBullet = target;
  }
  else {
    currentActiveBullet = undefined;
  }
});

See the Pen
Toggle active bullet by amCharts team (@amcharts)
on CodePen.0