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:

TypeScript

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
    })
  });
});

JavaScript

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:

TypeScript

let series = chart.series.push(
  am5xy.LineSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    groupDataWithOriginals: true
  })
);

JavaScript

varseries = chart.series.push(
  am5xy.LineSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    groupDataWithOriginals: true
  })
);

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Different bullet styling of grouped data itemsdifferent-bullet-styling-of-grouped-data-items