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
41 changes: 32 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,41 @@
# Adding Annotations to Blazor Charts

This sample explains about how to add annotations to the Syncfusion Blazor Charts. It also includes the code snippet to position annotations based on the pixel and point values.
This project demonstrates how to add and customize annotations in **Syncfusion Blazor Charts**. It focuses on displaying annotations at specific locations within a chart using both **pixel-based** and **data point–based** positioning. The sample is intended to help developers understand how annotations can be used to highlight important data, display contextual information, or overlay custom content directly on charts in a Blazor application.

**Examples**: https://blazor.syncfusion.com/demos/chart/spline
The example uses Syncfusion Blazor Chart component and shows how annotations integrate seamlessly with chart rendering and layout behavior.

**Documentation**: https://blazor.syncfusion.com/documentation/chart/chart-annotations
## Project Overview

Annotations in charts are commonly used to emphasize trends, explain spikes or drops in data, or provide additional UI elements such as labels and notes. This project illustrates how chart annotations behave relative to axes, series data, and chart dimensions, making it easier to apply them correctly in real-world dashboards and analytical applications.

## Features

- Add annotations to Syncfusion Blazor Charts
- Position annotations using pixel values
- Position annotations using chart data points
- Works with standard Blazor chart configurations
- Demonstrates practical annotation use cases

## Prerequisites

* Visual Studio 2022
- Visual Studio 2022
- .NET SDK compatible with Blazor
- Basic knowledge of Blazor and Syncfusion components

## How to Run the Project

1. Clone or download this project to your local machine.
2. Open the solution file using **Visual Studio 2022**.
3. Restore all required NuGet packages by rebuilding the solution.
4. Run the project to view the chart annotation example in the browser.

## Usage

Use this sample as a reference when implementing annotations in your own Blazor chart applications. You can adapt the annotation positioning logic to suit different chart types and layouts.

## Additional Resources

## How to run the project
- **Live Demo**: https://blazor.syncfusion.com/demos/chart/spline
- **Documentation**: https://blazor.syncfusion.com/documentation/chart/chart-annotations

* 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.
These resources provide further details on chart configuration options and advanced annotation scenarios.
Loading