Search code examples
hideshowamchartsbullet

Hide/Show of Amcharts bullets doesn't work


I'm using amcharts4 to create large data charts (XY). I want to include two different types of bullets in it. Then these different types shall be switched on/off by the user. I managed to switch off, but not on again.

As my real usecase loads a lot(!) of data, I implemented the bullets in an unusual way to keep performance up: The bullets are disabled and then enabled with propertyfield.disabled.

var smallBullet11 = series1.bullets.push(new am4charts.LabelBullet());
smallBullet11.disabled = true;
smallBullet11.propertyFields.disabled = "hideBullet1";

As a result I can hide, but later on not show the bullets again.

Here is the full example: https://jsfiddle.net/9uwgp85s/

Click on "Hide X-Bullets" first (will work) and then "Show X-Bullets" (won't work).

Has anyone an idea how to switch the bullets on again?

Thanks for any hint!


Solution

  • You'll need to call show/hide on the individual bullets, for example:

    function hidebullets() {
      smallBullet11.clones.each(function(bullet) {
        bullet.hide();
      });
    }
    
    function showbullets() {
      smallBullet11.clones.each(function(bullet) {
        bullet.show();
      });
    }
    

    You might also find the minBulletDistance property helpful in improving performance on a line chart with a ton of bullets. It allows you to specify a minimum distance between each point before a bullet is drawn; the larger the distance, the fewer the bullets that will get drawn until you zoom in. You can find more performance tips like this one here.