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
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.