TL;DR: Discover find out how to use markers in Syncfusion Angular Charts to reinforce information readability and visible attraction. Study to allow markers, customise their look, and even add icons or pictures for distinctive information level illustration.
Charts are highly effective information visualization instruments. They assist convey complicated information in an simply comprehensible and visually interesting method. One key ingredient in a chart that may improve its readability and visible impression is utilizing markers.
A marker in a chart is an emblem used to signify particular person information factors, making them simply identifiable. They’ll range in form, dimension, and shade and are sometimes used to reinforce the readability and visible attraction of knowledge visualizations.
On this weblog, we’ll discover find out how to use markers within the Syncfusion Angular Charts to focus on information factors successfully.
Observe: Earlier than continuing, check with the getting began with Angular Charts documentation.
Getting ready the information for the Angular Charts
Right here, we’re going to plot music album gross sales from 2000 to 2016. We are going to create an object referred to as albumSalesData with the yr and noOfAlbums properties to retailer the variety of albums offered in a particular yr.
Consult with the next code instance.
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 },
];
Allow markers in Angular Charts
To allow markers within the Angular Charts, set the marker’s seen property to true. This configuration tells the chart to show markers for every information level.
By default, markers is not going to be seen, so enabling this property ensures they’re rendered on the chart. It will enable viewers to see every information level clearly. You’ll be able to additional customise the looks of those markers, reminiscent of their form, dimension, and shade, to make the information extra distinguishable and improve the chart’s visible readability.
Consult with the next code instance.
Index.html
<e-series-collection>
<e-series
[dataSource]='information' sort="Spline" xName="yr" yName="noOfAlbums"
[marker]='marker'>
</e-series>
</e-series-collection>
app.element.ts
public marker: Object = {
seen: true
};
Consult with the next picture.
Customizing the markers in Angular Charts
Customizing markers lets you management their appearances, reminiscent of their form, dimension, border, and visibility to higher match the design and focus of your chart.
Consult with the next code instance.
public marker: Object = {
seen: true,
peak: 15,
width: 15,
fill: 'Yellow',
form: 'Sq.',
isFilled: true,
border: {shade: 'pink', width: 1.5}
};
Within the above instance, the marker’s seen property has been set to true, and each the peak and width properties are set to 15 to render enlarged markers. The form is about to Sq., the isFilled property is about to true, the fill shade is about to yellow, and a border can also be supplied.
Consult with the next picture.
Setting a customized icon or pictures
Setting pictures or icons as markers in Angular Charts is an effective way to reinforce visible attraction and convey further data.
To set a picture as a marker, that you must set the marker’s form property to Picture after which specify the picture path utilizing the marker’s imageURL property.
Consult with the next code instance.
marker:{
seen: true,
imageUrl: './cd.png',
form: 'Picture',
width: 15, peak: 15
},
Consult with the next picture.
Reference
For extra particulars, check with the instance for including and customizing markers in Angular Charts on StackBlitz.
Conclusion
Thanks for studying! On this weblog, we’ve seen find out how to allow and customise markers within the Syncfusion Angular Charts element for higher information visualization. We encourage you to do that choice and go away your suggestions within the feedback part beneath.
You can even take a look at our on-line demos and documentation for a extra in-depth have a look at what you are able to do with the Angular Charts element.
If you’re new to Syncfusion, strive our management options by downloading a free trial.
For questions, you’ll be able to contact us by means of our help boards, help portal, or suggestions portal. We’re all the time comfortable to help you!
