amcharts v4 - How to get series and bullet elements from an XY chart?

Issue

Let's say an XY chart is created like this :

let charts = [];

function createChart() {
  am4core.useTheme(am4themes_animated);

  // Create chart instance
  let chart = am4core.create("chartdiv", am4charts.XYChart);

  // Add data
  chart.data = [{
    "date": new Date(2018, 0, 1),
    "value": 450,
    "showTooltip": "always"
  }, ...,
  {
    "date": new Date(2018, 0, 5),
    "value": 500,
    "showTooltip": "always",
    "orientation": "up",
    "offset": 5
  }];

  // Create axes
  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());

  ...

  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  let series = chart.series.push(new am4charts.LineSeries());

  ...

  let bullet = series.bullets.push(new am4charts.CircleBullet());

  ...

  charts.push(chart);
}

function modifyTooltip() {
  let chart = charts[0];

  // How to get the first bullet, second bullet, third bullet of the XY chart?
  let bullets = chart.series.bullet; // <- undefined
}

The objective is to modify the first, second, and third bullets tooltip display, in function modifyTooltip() :

bullets.propertyFields.showTooltipOn = "showTooltip";

The chart and the first, second, and third bullets look like this :

Reference : Codepen - amcharts v4 XYchart example

Is there any methods to loop through all bullets in the line series so one can modify tooltip property of particular bullet using propertyFields?

Thanks in advance

Solution

This is what got series and bullet elements :

...

function modifyTooltip() {
  // Get series element from XY chart
  let series = charts[0].series.getIndex(0);
  
  // Get bullets element from series
  let bullets = series.bullets.getIndex(0);

  // Only display tooltip on particular bullets
  bullets.propertyFields.showTooltipOn = "showTooltip";
}

Particular bullets, in this case, refer to Bullet 1, Bullet 2, and Bullet 3, as illustrated in the picture.

---

Explanation of :

// Get series element from XY chart
let series = charts[0].series.getIndex(0);

Amcharts v4 XY chart docs states it has series property.

Series property's type is ListTemplate which can be obtained with getIndex() method.

Explanation of :

// Get bullets element from series
let bullets = series.bullets.getIndex(0);

Series has a property named bullets, per Amcharts v4 series docs. Bullets, just like series, is ListTemplate type. That means, one can retrieve it using getIndex() method.

Explanation of :

// Only display tooltip on particular bullets
bullets.propertyFields.showTooltipOn = "showTooltip";

"How come bullets.propertyFields.showTooltipOn = "showTooltip"; can select certain bullets (Bullet 1, Bullet 2, and Bullet 3) ?"

The key is in the chart.data. It should look something like this :

chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "showTooltip": "always"
}, {
  "date": new Date(2018, 0, 4),
  "value": 490
}, {
  "date": new Date(2018, 0, 5),
  "value": 500
}];

The first three elements of chart.data contains showTooltip property which determines if the bullet that represents that element should display tooltip or not.

Note: property name can be other than showTooltip.

Let's say the property name is isTooltipShown.

chart.data = [{
  "date": new Date(2018, 0, 1),
  "value": 450,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 2),
  "value": 269,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 3),
  "value": 700,
  "isTooltipShown": "always"
}, {
  "date": new Date(2018, 0, 4),
  "value": 490
}, {
  "date": new Date(2018, 0, 5),
  "value": 500
}];

Accordingly, the one in function modifyTooltip() should be :

...
// Only display tooltip on particular bullets
bullets.propertyFields.showTooltipOn = "isTooltipShown";

Another key is the propertyFields. This is crucial when overriding a property of an item in series with a value from data. Learn more: Amcharts v4 - Selective Sticky Tooltips.

Answered By - marc