How to create a stock event in amCharts v4?

Question

Is it possible to indicate events along a series in amCharts v4 similar to the Stock Event in the v3 stock chart?

Answer 1

While I was brought on board specifically for v4 and am not familiar with v3, I'm confident you can simulate some of these features using Bullets.

A bullet is a Container (basically a placeholder parent for whatever visual object or additional Containers that you want), that will appear at every point of data. You can put a label there as well as a line and any other shape, e.g.:

var stockBullet = series.bullets.push(new am4charts.Bullet());
stockBullet.dy = -20;

var circle = stockBullet.createChild(am4core.Circle);
circle.stroke = "#000";
circle.strokeWidth = 1;
circle.radius = 10;
circle.fill = series.fill.brighten(-0.3);
circle.dy = -10;

var line = stockBullet.createChild(am4core.Line);
line.stroke = "#000";
line.strokeWidth = 1;
line.height = 20;
var label = stockBullet.createChild(am4core.Label);
label.fill = am4core.color("#000");
label.strokeWidth = 0;
label.dy = -20;
label.textAlign = "middle";
label.horizontalCenter = "middle"

Since we don't want a bullet to appear at every point of data, only at Stock Events, we can handle that once the bullets are ready on the chart by going through their data, disabling them if need be, otherwise providing text for our label (and maybe tooltipText if need be) (presume there is a property stockEvent in the data):

stockBullet.events.on("inited", function(event) {
  if (event.target.dataItem && event.target.dataItem.dataContext && event.target.dataItem.dataContext.stockEvent) {
    event.target.children.getIndex(2).text = event.target.dataItem.dataContext.stockEvent.text;
  } else {
    event.target.disabled = true;
  }
});

Getting tooltips of different objects to play well with each other can be tricky depending on your chart, e.g. if it has Chart Cursor enabled there's a cursorTooltipEnabled property to prevent triggering a tooltip over bullets. To simplify things in this case what I did is make an invisible series per unique stock event bullet. For each stock event, use adapters to set its paired series' tooltipText to what's desired, and the base, visible series' tooltipText to "":

series.adapter.add("tooltipText", function(text, target) {
  if (target.tooltipDataItem.dataContext.stockEvent) {
     return "";
  }
  return text;
});
// ...
hiddenSeries.adapter.add("tooltipText", function(text, target) {
  if (target.tooltipDataItem.dataContext.stockEvent) {
     return target.tooltipDataItem.dataContext.stockEvent.description;
  }
  return "";
});

Here's a demo:

https://codepen.io/team/amcharts/pen/337984f18c6329ce904ef52a0c3eeaaa

Screenshot: