We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding text to DataMarker

How can I add additional text to data markers on a doughnut chart? Currently I have

<chart:ChartDataMarker LabelContent="YValue">

which displays a number as the data marker but I need to format that number to represent money.

So, essentially, I need to add a "$" before the number on the marker but something like the following does not work (obviously)

<chart:ChartDataMarker LabelContent="$YValue">


5 Replies

JC Jaikrishna Chandrasekar Syncfusion Team June 22, 2016 12:43 PM UTC

Hi Drew Wilson,  
Thanks for contacting Syncfusion support.   
We can add additional text to datamarker label. The LabelStyle of ChartDataMarker has a Property called LabelFormat which is used to format the datamarker labels. By using this LabelFormat, we can add $ symbol as prefix to the datamarker label.   
The following code illustrates how to add $ symbol as prefix to datamarker labels.   
<chart:DoughnutSeries  ItemsSource="{Binding data}">
                              <chart:DataMarkerLabelStyle LabelFormat ="$"/>
        </ chart:DoughnutSeries.DataMarker>
</ chart:DoughnutSeries  >  
DoughnutSeries series = new DoughnutSeries ();
series.ItemsSource = data;
series.DataMarker = new ChartDataMarker () {
           LabelStyle = new DataMarkerLabelStyle (){LabelFormat="$"},
Jaikrishna C   

DW Drew Wilson June 22, 2016 03:17 PM UTC

Worked perfectly!

GM Gobi M Syncfusion Team June 23, 2016 05:04 AM UTC

Hi Drew Wilson,  
Thanks for the update. 
Please let us know for any queries. 
Gobi M 

DW Drew Wilson August 2, 2016 06:16 PM UTC

I would like to further format this as currency by adding commas every 3 digits and two decimal places. Is it possible to do something like:

  <chart:DataMarkerLabelStyle LabelFormat ="$###,###.##"/>


YP Yuvaraj Palanisamy Syncfusion Team August 3, 2016 02:17 PM UTC

Hi Drew Wilson, 
We have prepared a sample as per your requirement. Please find the sample from the below location, 

Live Chat Icon For mobile
Up arrow icon