How to Add Clickable Annotation Text in Angular Accumulation Chart?

2 mins read

This article demonstrates how to make annotation text clickable in the Accumulation Angular Chart component. By using chart annotations and handling mouse click events, you can create interactive elements such as alerts.

Steps to Make Annotation Text Clickable

To create interactive annotation text in the Syncfusion Angular Accumulation Chart, follow these steps:

Define annotations using the annotations property with custom HTML content.
Bind the chartMouseClick event to detect user interaction.
Check the clicked target using args.target and trigger an action (e.g., window.alert) when the annotation is clicked.

This approach allows you to add clickable elements like labels or icons directly on the chart surface, enhancing user interactivity.

Code Example

app.component.html

<ejs-accumulationchart
   id="container"
   #pie
   (chartMouseClick)="mouseClick($event)"
   [annotations]="annotations"
 >
 </ejs-accumulationchart>

app.component.ts

public annotations: AccumulationAnnotationSettingsModel[] = [
   {
     x: 475,
     y: 181,
     region: 'Chart',
     coordinateUnits: 'Pixel',
     verticalAlignment: 'Middle',
     content:
       '<div id="chart_annotation"><span style="color: black; font-size: 16px;">●</span>Analyze</div>',
   },
 ];

 public mouseClick = (args: IMouseEventArgs) => {
   if (args.target === 'chart_annotation') {
     window.alert('Analyze is clicked');
   }
 };

Output

When click on the annotation text (“Analyze”), a browser alert is displayed.

Sample

View Sample in StackBlitz

Conclusion

I hope you enjoyed learning about how to add clickable annotation text in Angular Accumulation Chart.

You can refer to our Angular Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Angular Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Chart and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)