How to Dynamically Update X-Axis Annotation Content on Point Click in Angular Chart?

This article shows how to update an annotation’s content dynamically when a data point is clicked in a Angular Chart. On point click, we read the point’s x and y values and update the annotation content accordingly, then refresh the chart to reflect the change.

How it works

• An annotation is defined in the annotations array with initial content.
• The pointClick event triggers when a chart point is clicked.
• In pointClick, we set the annotation’s content using the clicked point’s x and y values and call chart.refresh() to update the view.

Code Example

app.component.html

<ejs-chart #chart (pointClick)="pointClick($event)">
 ....
  <e-annotations>
           <e-annotation  content='<div id="annotation1">Text</div>' verticalAlignment= 'Bottom' coordinateUnits='Pixel' x='55%' y=98%>
           </e-annotation>
       </e-annotations>
   </ejs-chart> 

app.component.ts

public pointClick(args: IPointEventArgs): void {
   this.chart.annotations[0].content =
     '<div id="annotation1">' + args.point.x + ' : ' + args.point.y + '</div>';
   this.chart.refresh();
 } 

Output

Live Sample

StackBlitz Sample