Using bullets to apply styling to grid under series

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can add a vertical Line element to a series bullet to show different styling of a grid under a LineSeries.

Code

In the following code we create a Container element in a bullet, then add a Circle and a Line element to it.

series.bullets.push(function () {
  const container = am5.Container.new(root, {});
  
  container.children.push(am5.Line.new(root, {
    points: [
      { x: 0, y: 0 },
      { x: 0, y: 2000 }
    ],
    stroke: am5.color(0x000000),
    strokeDasharray: [5]
  }));
  
  container.children.push(am5.Circle.new(root, {
    radius: 8,
    fill: series.get("fill"),
    stroke: root.interfaceColors.get("background"),
    strokeWidth: 2
  }));
  
  return am5.Bullet.new(root, {
    sprite: container
  });
});

series.bullets.push(function () {
  var container = am5.Container.new(root, {});
  
  container.children.push(am5.Line.new(root, {
    points: [
      { x: 0, y: 0 },
      { x: 0, y: 2000 }
    ],
    stroke: am5.color(0x000000),
    strokeDasharray: [5]
  }));
  
  container.children.push(am5.Circle.new(root, {
    radius: 8,
    fill: series.get("fill"),
    stroke: root.interfaceColors.get("background"),
    strokeWidth: 2
  }));
  
  return am5.Bullet.new(root, {
    sprite: container
  });
});

Example

See the Pen Using bullets to apply styling to grid under series by amCharts team (@amcharts) on CodePen.