Back

Technologies:

javascriptjavascript
avatar
Tolerim
a day ago

How can I include a dividend icon in an amCharts 5 stock chart?

As an experienced JavaScript developer, I have been asked to assist in the implementation of an icon (simply a D letter) in amCharts 5 stock chart that would signify the days on which a quote has distributed dividends. This icon would be accompanied by a tooltip that displays the actual dividend. An example of what we're looking for can be seen on the Yahoo Finance chart for AAPL at https://finance.yahoo.com/chart/AAPL. I appreciate any help you can provide!
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
To add an icon on the days a quote has distributed dividends in an amCharts 5 stock chart, you can use the marker feature. You can customize the marker by creating a template with the icon and tooltip. Here is an example of how you can use marker for this purpose: 
// Define the marker template
const markerTemplate = chart.plotContainer.createChild(am5xy.Marker);
markerTemplate.setStateOnChildren("default", (state) => {
  const icon = state.childTemplates.createChild(am5xy.Label);
  icon.text = "D";
  icon.align = "center";
  icon.valign = "middle";
  icon.fontSize = 12;
  icon.fontFamily = "FontAwesome";
  const tooltip = state.childTemplates.createChild(am5.Tooltip);
  tooltip.label.fillOpacity = 1;
  tooltip.label.background.fillOpacity = 1;
  tooltip.label.padding(8, 10, 8, 10);
  tooltip.label.fontSize = 12;
  tooltip.label.fontFamily = "Arial";
  tooltip.label.events.on("sizechanged", () => {
    tooltip.background.width = tooltip.label.pixelWidth + 20;
    tooltip.background.height = tooltip.label.pixelHeight + 20;
  });
  return state;
});

// Add marker to a series when a quote has distributed dividends
series.events.on("datavalidated", () => {
  const dataItems = series.dataItems;
  for (let i = 0; i < dataItems.length; i++) {
    const dataItem = dataItems.getIndex(i);
    if (dataItem.dataContext.dividend > 0) {
      const marker = dataItem.createChild(am5xy.Marker);
      marker.copyFrom(markerTemplate);
      marker.top = -10;
      marker.x = dataItem.pixelX;
      marker.y = dataItem.pixelY;
      marker.tooltipText = "$" + dataItem.dataContext.dividend;
    }
  }
});
In this example, we first define a marker template with the icon and tooltip. We use Font Awesome for the icon by setting the font family to "FontAwesome". We then add the marker to each data item that has distributed dividends in the series' datavalidated event. We set the marker position to the data item's pixel position and the tooltip text to the dividend amount.
;