Using bullets to apply styling to grid under series

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.

TypeScript

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

JavaScript

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

Open in CodePen