This tutorial shows how we can use data item object in a bullet function to determine whether it's a grouped data item, or regular one, to apply different styling to the bullet.
Related code
To determine if data item is for a grouped data, we will take a look at its originals
value.
Data item object is passed in as a third parameter in a bullet function:
series.bullets.push(function (root, series, dataItem) { let grouped = dataItem.get("originals") ? true : false; return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: grouped ? 8 : 4, fill: grouped ? am5.color(0xff0000) : series.get("fill"), stroke: am5.color(0xffffff), strokeWidth: 1 }) }); });
series.bullets.push(function (root, series, dataItem) { var grouped = dataItem.get("originals") ? true : false; return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: grouped ? 8 : 4, fill: grouped ? am5.color(0xff0000) : series.get("fill"), stroke: am5.color(0xffffff), strokeWidth: 1 }) }); });
Please note, originals
are not included in the data item settings by default.
To enable it, we need to set groupWithOriginals: true
in series' settings:
let series = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", groupDataWithOriginals: true }) );
varseries = chart.series.push( am5xy.LineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", groupDataWithOriginals: true }) );
Demo
See the Pen
Data grouping by amCharts team (@amcharts)
on CodePen.0