Different bullet styling of grouped data items

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.