Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,37 @@
# Adding Legends to Blazor Charts

This sample explains about how to add and customize a legend with its built-in options available in the Syncfusion Blazor Charts. It also includes the code snippet to position and align the legend, change the legend icon, highlight the selected series in the chart, and to animate the chart series.
This sample demonstrates how to add and customize legends in Syncfusion Blazor Charts using the built-in legend configuration options. It shows how legends can be positioned and aligned within the chart area, how legend icons can be customized, and how user interaction with legends can highlight the corresponding chart series. The sample also illustrates how chart series animations work together with legend interaction to improve data visualization and usability.

**Example**: https://blazor.syncfusion.com/demos/chart/column
The project is focused on providing practical guidance for developers who are building data-driven Blazor applications and want to enhance chart readability using legends. By following the examples in this project, developers can understand how legends contribute to better interpretation of chart data and how they can be tailored to match application requirements.

**Documentation**: https://blazor.syncfusion.com/documentation/chart/legend
## Features

- Add legends to Blazor charts using built-in Syncfusion options
- Customize legend position and alignment
- Configure legend icons for better visual clarity
- Highlight selected series through legend interaction
- Apply animation effects to chart series

## Prerequisites

* Visual Studio 2022
To work with this sample, ensure the following requirements are met:

- Visual Studio 2022
- .NET SDK compatible with Blazor applications
- Basic knowledge of Blazor components and C#

## How to Run the Project

1. Check out this project to a local directory on your system.
2. Open the solution file using Visual Studio 2022.
3. Restore the required NuGet packages by rebuilding the solution.
4. Run the project to view the Blazor chart legend customization in action.

## Usage

Use this sample as a reference when implementing legends in your own Blazor chart applications. You can adapt the demonstrated legend settings to control visibility, alignment, and interaction behavior based on your application’s needs.

## How to run the project
## Additional Resources

* Checkout this project to a location in your disk.
* Open the solution file using the Visual Studio 2022.
* Restore the NuGet packages by rebuilding the solution.
* Run the project.
- **Example**: https://blazor.syncfusion.com/demos/chart/column
- **Documentation**: https://blazor.syncfusion.com/documentation/chart/legend
Loading