Skip to content

Commit 7dc5d69

Browse files
author
Surya Karan Raja
authored
Update README.md
1 parent 17cf76e commit 7dc5d69

File tree

1 file changed

+7
-17
lines changed

1 file changed

+7
-17
lines changed

README.md

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,22 @@ In .NET MAUI applications, data visualization plays a crucial role in presenting
77

88
One common requirement in charting applications is the ability to customize the appearance of data labels. This sample demonstrates how to add a custom view to the data label of a .NET MAUI Cartesian Chart. The custom view includes a label displaying the value of the data point and an image indicating the trend based on the value.
99

10-
## Features
10+
## Defining the Custom View
1111

12-
- Customizing data labels with a custom view containing a label and an image.
13-
- Dynamically changing text color and image based on data point values.
14-
- Summing up data point values in the label using a converter.
12+
We create a DataTemplate named “dataLabel”, consisting of a StackLayout containing a Label. This label displays the value of the data point and utilizes a converter to dynamically change its color based on the value. And the Image control displays the respective image based on the data point and utilized a convertor to dynamically change its image based on the value.
1513

16-
## Getting Started
14+
## Implementing the Value Converter
1715

18-
To run this sample locally, follow these steps:
16+
The **ValueToColorConverter** and **ValueToImageConverter** classes are implemented to handle the logic of changing text color and displaying icons based on the value, respectively. These converters are applied to the TextColor and Source properties within the data label template. The **ValueToSummaryValueConverter** class is used to return the sum of the data point values, with the sum accumulating as each data point passes through this converter.
1917

20-
1. Clone this repository to your local machine.
21-
2. Open the solution in Visual Studio.
22-
3. Ensure you have the necessary dependencies installed, including .NET MAUI and Syncfusion controls.
23-
4. Build and run the application.
18+
## Integrating the Custom View with the Chart
19+
20+
Incorporate the custom view into your chart by assigning the LabelTemplate property of the series to the defined DataTemplate. Ensure that the **ShowDataLabels** property is set to **True** to display the data labels.
2421

2522
## Output
2623

2724
![image](https://github.com/SyncfusionExamples/How-to-add-a-custom-view-to-the-data-label-of-a-.NET-MAUI-Chart/assets/113962276/d4f7b597-bc73-4e93-8dc3-9e34d724ff10)
2825

29-
30-
## Usage
31-
32-
You can use this sample as a reference to implement custom data label views in your .NET MAUI applications. The provided code snippets demonstrate how to define a custom view in XAML, implement value converters in C#, and integrate the custom view with the Cartesian Chart control.
33-
34-
Feel free to customize the code according to your specific requirements and data visualization needs.
35-
3626
For a step by step procedure, refer to the Knowledge base : [how to add a custom view to the data label of a .NET MAUI Cartesian Chart?]()
3727

3828
## Troubleshooting

0 commit comments

Comments
 (0)