Using Circle Bullets

XY #bullets #series

As you may already know from “Bullets” tutorial, a bullet in amCharts 4 can be anything. This tutorial explores how we can can quickly add and configure certain bullet type - Circle bullet.

Adding a circle bullet

A “circle bullet” is a special kind of bullet that already has a Circle element in it, so you don’t have to add this shape, when you instantiate CircleBullet and use it in a series.

let bullet = lineSeries.bullets.push(new am4charts.CircleBullet());

var bullet = lineSeries.bullets.push(new am4charts.CircleBullet());

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet"
    }]
  }]
}

This will add a nice tiny circle to each data item in our series:

Configuring the bullet

Let’s see how we may modify this pre-made bullet to better suit our needs.

A CircleBullet object has a property - circle - which holds an element of type Circle, and which we will be using to modify the appearance of our bullets.

Setting radius

A Circle’s size is determined by its radius property. By default it is set to 5 pixels, making our bullets 10 pixel wide/tall.

It’s easy to change:

circleBullet.circle.radius = 10;

circleBullet.circle.radius = 10;

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "circle": {
        "radius": 10
      }
    }]
  }]
}

Bullet color

The trick with the series’ bullets is that they will always inherit color from its series. That is unless you explicitly specify a color for it.

To set color for the circle’s fill, we use its fill and fillOpcity properties.

For circle’s outline, we have stroke and strokeOpacity.

circleBullet.circle.fill = am4core.color("red");
circleBullet.circle.fillOpacity = 0.5;
circleBullet.circle.stroke = am4core.color("red");
circleBullet.circle.strokeOpacity = 0.5;

circleBullet.circle.fill = am4core.color("red");
circleBullet.circle.fillOpacity = 0.5;
circleBullet.circle.stroke = am4core.color("red");
circleBullet.circle.strokeOpacity = 0.5;

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "circle": {
        "radius": 10,
        "fill": "red",
        "fillOpacity": 0.5
        "stroke": "red",
        "strokeOpacity": 0.5
      }
    }]
  }]
}

The above will plop red semi-transparent bullets on top of our Line series:

Adjusting outline

Our bullet’s circle does not have only tiny outline by default, which automatically inherits series’ color.

We can easily modify the thickness of the outline using circle’s strokeWidth property. Or completely eliminate outline by setting it to zero.

Let’s try to add a nice automatically-colored bullet with some white outline:

circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 3;

circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 3;

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "circle": {
        "radius": 10,
        "stroke": "#fff",
        "strokeWdith": 3
      }
    }]
  }]
}

Inverted bullet

Want it the other way around: white fill with colored outline?

Set color for the fill and let stroke be inherited from series:

circleBullet.circle.fill = am4core.color("#fff");
circleBullet.circle.strokeWidth = 3;

circleBullet.circle.fill = am4core.color("#fff");
circleBullet.circle.strokeWidth = 3;

{
  // ...
  "series": [{
    "type": "LineSeries",
    // ...
    "bullets": [{
      "type": "CircleBullet",
      "circle": {
        "radius": 10,
        "fill": "#fff",
        "strokeWdith": 3
      }
    }]
  }]
}