diff --git a/README.md b/README.md index 566c349..b8b2fce 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,63 @@ -# Blazor Charts Component Using Blazor Web App -This repository contains examples to help you how to create and customize the charts with real time examples +# Blazor Charts Component Examples -## System requirements -https://blazor.syncfusion.com/documentation/system-requirements +A collection of real-world examples demonstrating how to create and customize interactive charts using [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) components. Each example showcases different chart types with practical use cases and real data. + +## Overview + +This repository provides a comprehensive set of working examples for building charts with Blazor Web App and charting library. Each example includes: + +- **Complete, runnable projects** with both server and client components +- **Real-world data visualization** scenarios (insurance market caps, egg prices, smartphone shipments, etc.) +- **Customization examples** including colors, labels, tooltips, and legends +- **Best practices** for data binding and component configuration + +## Chart Types Included + +- **Column Chart** — Visualize categorical data with vertical bars +- **Line Chart** — Display trends over time with line series and markers +- **Multi Series Chart** — Combine multiple chart types in a single visualization +- **Stacked Bar 100%** — Show percentage distribution of categories as horizontal bars +- **Stacked Column 100%** — Show percentage distribution of categories as vertical bars + +## Prerequisites + +* [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or later +* [Visual Studio Code](https://code.visualstudio.com/) +* [.NET SDK 8.0](https://dotnet.microsoft.com/download/dotnet/8.0) or later ## Getting Started -https://blazor.syncfusion.com/documentation/chart/getting-started-with-web-app + +### Clone the Repository + +```bash +git clone https://github.com/yourusername/blazor-charts.git +cd blazor-charts +``` + +### Run with Visual Studio + +1. Open the solution file using Visual Studio 2022 or later. +2. Restore the NuGet packages by rebuilding the solution. +3. Build the project to ensure there are no compilation errors. +4. Run the project. + +### Run with .NET CLI + +```bash +# Restore dependencies +dotnet restore + +# Run the project +dotnet run +``` + +## References + +- [Syncfusion Blazor Chart Documentation](https://blazor.syncfusion.com/documentation/chart/getting-started-with-web-app) +- [Blazor Line Chart Documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/line) +- [Blazor Stacked Column Chart Documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stacked-column) +- [Blazor 100% Stacked Column Chart Documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/stack-column) +- [Blazor Chart Tooltip Documentation](https://blazor.syncfusion.com/documentation/chart/tool-tip) + + +