---
title: "Enhance Data Visualization with Markers in Angular Charts"
published_at: "2024-11-14T10:26:32+00:00"
modified_at: "2025-11-06T07:32:57+00:00"
url: "https://www.syncfusion.com/blogs/post/add-customize-markers-angular-charts"
excerpt: "This blog explains how to enable and customize markers in the Syncfusion Angular Charts component for better data presentation."
taxonomy_category:
  - "Angular"
  - "Chart"
  - "Data Visualization"
  - "Web Development"
taxonomy_post_tag:
  - "Angular"
  - "Chart"
  - "Data Visualization"
  - "UI Components"
  - "Web"
---

# Enhance Data Visualization with Markers in Angular Charts

[Gowrimathi S](https://www.syncfusion.com/blogs/author/gowrimathis)

![Enhance Data Visualization with Markers in Angular Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Enhance-Data-Visualization-with-Markers-in-Angular-Charts.jpg)


**TL;DR**: Explore how to use markers in Syncfusion Angular Charts to enhance data clarity and visual appeal. Learn to enable markers, customize their appearance, and even add icons or images for unique data point representation.

Charts are powerful data visualization tools. They help convey complex data in an easily understandable and visually appealing manner. One key element in a chart that can enhance its clarity and visual impact is using markers.

A marker in a chart is a symbol used to represent individual data points, making them easily identifiable. They can vary in shape, size, and color and are often used to enhance the readability and visual appeal of data visualizations.

In this blog, we’ll explore how to use markers in the Syncfusion [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts)
 to highlight data points effectively.

**Note:** Before proceeding, refer to the [getting started with Angular Charts documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started)
.

## Preparing the data for the Angular Charts

Here, we are going to plot music album sales from 2000 to 2016. We will create an **object** called ** albumSalesData** with the ** year** and ** noOfAlbums** properties to store the number of albums sold in a specific year.

Refer to the following code example.

```
public albumSalesData: Object[] = [
   { year: 2000, noOfAlbums: 10 }, { year: 2002, noOfAlbums: 7 }, { year: 2004, noOfAlbums: 13 },
   { year: 2005, noOfAlbums: 16 }, { year: 2007, noOfAlbums: 11 }, { year: 2010, noOfAlbums: 10 },
   { year: 2011, noOfAlbums: 15 }, { year: 2013, noOfAlbums: 20 }, { year: 2014, noOfAlbums: 17 },
   { year: 2015, noOfAlbums: 5 },
];
```

## Enable markers in Angular Charts

To enable [markers](https://ej2.syncfusion.com/angular/documentation/chart/data-markers)
 in the Angular Charts, set the marker’s [visible](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel/#visible)
 property to **true.** This configuration tells the chart to display markers for each data point.

By default, markers will not be visible, so enabling this property ensures they are rendered on the chart. This will allow viewers to see each data point clearly. You can further customize the appearance of these markers, such as their shape, size, and color, to make the data more distinguishable and enhance the chart’s visual clarity.

Refer to the following code example.

**Index.html**

```
<e-series-collection>
 <e-series
     [dataSource]='data' type='Spline' xName='year' yName='noOfAlbums'  
     [marker]='marker'>
 </e-series>
</e-series-collection>
```

**app.component.ts**

```
public marker: Object = {
  visible: true
};
```

Refer to the following image.

![Enabling markers in Angular Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Enabling-markers-in-Angular-Charts.png)

Enabling markers in Angular Charts

## Customizing the markers in Angular Charts

Customizing markers allows you to control their appearances, such as their shape, size, border, and visibility to better match the design and focus of your chart.

Refer to the following code example.

```
public marker: Object = {
    visible: true,
    height: 15,
    width: 15,
    fill: 'Yellow',
    shape: 'Square',
    isFilled: true,
    border: {color: 'red', width: 1.5}
};
```

In the above example, the marker’s**visible** property has been set to ** true,** and both the ** height** and ** width** properties are set to ** 15** to render enlarged markers. The ** shape** is set to ** Square,** the ** isFilled** property is set to ** true,** the ** fill** color is set to ** yellow,** and a ** border** is also provided.

Refer to the following image.

![Customizing markers in Angular Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Customizing-markers-in-Angular-Charts.png)

Customizing markers in Angular Charts

## Setting a custom icon or images

Setting images or icons as markers in Angular Charts is a great way to enhance visual appeal and convey additional information.

To set an image as a marker, you need to set the marker’s **shape** property to ** Image** and then specify the image path using the marker’s ** imageURL** property.

Refer to the following code example.

```
marker:{ 
  visible: true,
  imageUrl: './cd.png',
  shape: 'Image', 
  width: 15, height: 15
},
```

Refer to the following image.

![Setting an image as a marker in Angular Charts](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Setting-an-image-as-a-marker-in-Angular-Charts.png)

Setting an image as a marker in Angular Charts

## Reference

For more details, refer to the [example for adding and customizing markers in Angular Charts on StackBlitz](https://stackblitz.com/edit/angular-h61hrk-qqt5e2?file=src%2Fapp.component.ts,src%2Fapp.component.html)
.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to enable and customize markers in the [Syncfusion Angular Charts](https://www.syncfusion.com/angular-components/angular-charts)
 component for better data visualization. We encourage you to try this option and leave your feedback in the comments section below.

You can also check out our [online demos](https://ej2.syncfusion.com/angular/demos/#/fluent2/chart/overview-chart)
 and [documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started)
 for a more in-depth look at what you can do with the Angular Charts component.

If you are new to Syncfusion, try our control features by downloading a [free trial](https://www.syncfusion.com/downloads)
.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback)
. We are always happy to assist you!

## Related Blogs



[Easily Integrate WProofreader with Angular Rich Text Editor](https://www.syncfusion.com/blogs/post/wproofreader-with-rich-text-editor)



[Effective Techniques to Share Angular Components Across Projects](https://www.syncfusion.com/blogs/post/share-angular-components-across-projects)



[Introducing the New Angular Smart Paste Button Component](https://www.syncfusion.com/blogs/post/angular-smart-paste-button-component)



[Easily Automate Flowchart Creation in Angular Diagram](https://www.syncfusion.com/blogs/post/flowchart-creation-in-angular-diagram)