From 87e8afea42c801f89bfaad58aa6344d3ed471a75 Mon Sep 17 00:00:00 2001 From: vasavi-s-SF4854 Date: Tue, 14 Jul 2026 19:13:47 +0530 Subject: [PATCH] updated readme file --- README.md | 245 +++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 179 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 608eccb..262a06d 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,185 @@ # Winforms-chart-getting-started -The [WinForms Chart](https://www.syncfusion.com/winforms-ui-controls/chart?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) is used as a means to show the graphical representation of two values. For Example, a Line Chart can be used in health Statistic reports, in which it can show the rates over time or for a series of values, such as age-specific death rates. Logarithmic charts can be used in Share price charts where we plot between price and time. In logarithmic chart, we can identify the ‘Proportional change in price’ with respect to the ‘Change in time’. We use ‘Proportional change in price’ to observe market sentiment. Market participants move share prices either up or down proportionally depending on how bullish or bearish they feel. +This sample demonstrates how to create and customize a Syncfusion® WinForms Chart control. + +## Prerequisites + +- Visual Studio 2022 or later +- .NET 10.0 or later +- Syncfusion® `Syncfusion.Chart.Windows` NuGet package + +## Assembly Deployment + +To use the Chart control, add the **Syncfusion.Chart.Windows** NuGet package to your project. + +Open the **Package Manager Console** and run: + +``` +Install-Package Syncfusion.Chart.Windows +``` + +Or, add the reference directly in your `.csproj` file: + +```xml + + + +``` + +## Adding Chart to the Form + +### Step 1: Create a Windows Forms Application + +Open Visual Studio, create a new **Windows Forms App** project targeting **.NET 10.0**. + +### Step 2: Create a Data Model + +Create a data model class to represent the data points for the chart: + +```csharp +public class SalesData +{ + private string year; + private double sales; + + public string Year + { + get { return year; } + set { year = value; } + } + + public double Sales + { + get { return sales; } + set { sales = value; } + } + + public SalesData(string year, double sales) + { + this.year = year; + this.sales = sales; + } +} +``` -![](Images/GettingStarted_Output.PNG) - -## Features and benefits - -### Chart types -The WinForms Chart control includes a comprehensive set of more than 45 [chart types](https://www.syncfusion.com/winforms-ui-controls/chart/types?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) for all your business needs. Each one is highly and easily configurable with built-in support for creating stunning visual effects. - -### Chart real-time data -The Chart control can efficiently handle [real-time](https://www.syncfusion.com/kb/9344/how-to-create-a-real-time-chart-in-wf?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) data as illustrated in the following screenshots. Updates are optimized to be smooth and flicker-free. - -### Template support -Save time by persisting the appearance of a chart created at design time or runtime as a template. Apply the saved style to a new chart by loading the template. - -### Zooming and scrolling -Enable the built-in zooming and scrolling features of a chart to provide users with great chart flexibility. - -### Panning support for zoomed chart -WinForms Graph supports panning a chart when it is zoomed. You can navigate to parts of the chart outside of the viewing area by simply clicking and dragging. - -### Axis label binding -Bind [axis](https://help.syncfusion.com/windowsforms/chart/chart-axes?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) labels to pie, funnel, and pyramid charts. This feature displays data-bound labels in charts. - -### LINQ support -Use LINQ to create varied, concise, and optimal views of your data. Bind to LINQ query results and view your data using many different chart types. Binding a LINQ query result to a chart and the resultant display are illustrated here. - -### Excel importing and exporting -The WinForms Graph control can be used with the Syncfusion Excel Library to import data from Excel documents into a chart. Simpler Excel data can, of course, be loaded using the Microsoft Jet OLEDB data provider. - -### 3D Mode -The Windows Forms Chart control supports 3D modes for all chart types except polar and radar charts. - -### Color palette -The Chart comes with a set of color palettes that are automatically applied to a chart's data points if no custom colors are specified for the series. These built-in palettes offer a rich set of colors to render professional-looking charts. - -## Related links -[Learn More about WinForms Chart Control](https://www.syncfusion.com/winforms-ui-controls/chart?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[Download Free Trial](https://www.syncfusion.com/downloads/windowsforms?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[Pricing](https://www.syncfusion.com/sales/products/windowsforms?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[Documentation](https://help.syncfusion.com/windowsforms/chart/overview?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[View Demos](https://github.com/syncfusion/winforms-demos?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[Community Forums](https://www.syncfusion.com/forums/windowsforms?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/winforms?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) - -## About Syncfusion WinForms UI Controls -Syncfusion's [WinForms UI Controls](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) library is the only suite that you will ever need to build an application since it contains over 100 high-performance, lightweight, modular, and responsive UI Controls in a single package. In addition to Chart, we provide popular WinForms Controls such as [DataGrid](https://www.syncfusion.com/winforms-ui-controls/datagrid?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Scheduler](https://www.syncfusion.com/winforms-ui-controls/scheduler?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Diagram](https://www.syncfusion.com/winforms-ui-controls/diagram?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), and [Syntax editor](https://www.syncfusion.com/winforms-ui-controls/syntax-editor?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples). - -## About Syncfusion -Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 27,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies. - -Today, we provide 1700+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples), and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software. - - -This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/eula/es/?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples). To acquire a license, you can purchase one [here]( https://www.syncfusion.com/sales/products/windowsforms?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials?utm_source=github&utm_medium=listing&utm_campaign=winforms-chart-github-samples). - -
- -

- sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET
-

+### Step 3: Add the Chart Control + +In the `Form1.Designer.cs` (or code-behind), initialize and configure the `ChartControl`: + +```csharp +using Syncfusion.Drawing; +using Syncfusion.Windows.Forms.Chart; +using System.ComponentModel; + +// Initialize the ChartControl +this.chartControl1 = new Syncfusion.Windows.Forms.Chart.ChartControl(); + +// Set chart appearance +this.chartControl1.ChartArea.BackInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.Transparent); +this.chartControl1.ChartArea.CursorLocation = new System.Drawing.Point(0, 0); +this.chartControl1.ChartArea.CursorReDraw = false; +this.chartControl1.DataSourceName = "[none]"; +this.chartControl1.IsWindowLess = false; +this.chartControl1.TabIndex = 0; +this.chartControl1.Skins = Skins.Metro; +// Set PrimaryXAxis properties +this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category; +this.chartControl1.PrimaryXAxis.TitleColor = System.Drawing.SystemColors.ControlText; +// Create data source +BindingList dataSource = new BindingList(); +dataSource.Add(new SalesData("1999", 3)); +dataSource.Add(new SalesData("2000", 7)); +dataSource.Add(new SalesData("2001", 12)); +dataSource.Add(new SalesData("2002", 18)); +dataSource.Add(new SalesData("2003", 22)); +dataSource.Add(new SalesData("2004", 30)); +dataSource.Add(new SalesData("2005", 40)); +dataSource.Add(new SalesData("2006", 50)); +dataSource.Add(new SalesData("2007", 65)); +dataSource.Add(new SalesData("2008", 75)); +// Create data binding model +CategoryAxisDataBindModel dataSeriesModel = new CategoryAxisDataBindModel(dataSource); +dataSeriesModel.CategoryName = "Year"; +dataSeriesModel.YNames = new string[] { "Sales" }; + +// Create chart series +ChartSeries chartSeries = new ChartSeries("Sales"); +chartSeries.CategoryModel = dataSeriesModel; +chartSeries.Style.DisplayText = true; +chartSeries.Style.TextOrientation = ChartTextOrientation.Up; + +// Configure legend +this.chartControl1.Legend.Visible = true; +this.chartControl1.LegendAlignment = ChartAlignment.Center; +this.chartControl1.Legend.Position = ChartDock.Top; +this.chartControl1.LegendsPlacement = ChartPlacement.Outside; + +// Add series to chart +this.chartControl1.Series.Add(chartSeries); + +// Enable tooltips +this.chartControl1.ShowToolTips = true; +this.chartControl1.Tooltip.BackgroundColor = new BrushInfo(Color.White); +this.chartControl1.Tooltip.BorderStyle = BorderStyle.FixedSingle; +this.chartControl1.Tooltip.Font = new Font("Segoe UI", 10); +chartSeries.PointsToolTipFormat = "{2}"; + +// Set size and add to form +this.chartControl1.Size = new System.Drawing.Size(1500, 450); +this.AutoScaleDimensions = new System.Drawing.SizeF(9F, 20F); +this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; +this.ClientSize = new System.Drawing.Size(821, 577); + +panel.AutoSize = true; +panel.Controls.Add(chartControl1); + +this.Controls.Add(panel); +this.Name = "Form1"; +this.Text = "Form1"; +``` + +## Customizing Chart Appearance + +The appearance of the chart can be customized using various properties. In the example above, we applied the Metro skin: + +```csharp +this.chartControl1.Skins = Skins.Metro; +``` + +## Enabling Data Labels + +Data labels can be enabled to show values directly on the chart: + +```csharp +chartSeries.Style.DisplayText = true; +chartSeries.Style.TextOrientation = ChartTextOrientation.Up; +``` + +## Enabling Tooltips + +Tooltips provide detailed information about data points when hovering over them: + +```csharp +this.chartControl1.ShowToolTips = true; +this.chartControl1.Tooltip.BackgroundColor = new BrushInfo(Color.White); +this.chartControl1.Tooltip.BorderStyle = BorderStyle.FixedSingle; +this.chartControl1.Tooltip.Font = new Font("Segoe UI", 10); +chartSeries.PointsToolTipFormat = "{2}"; +``` + +## Running the Sample + +1. Clone or download this repository. +2. Open `GettingStarted_Chart.slnx` in Visual Studio. +3. Restore NuGet packages. +4. Build and run the project (`F5`). + +![Getting started in winforms chart](Images/GettingStarted_Output.PNG) + +## References + +- [Syncfusion WinForms Chart Documentation](https://help.syncfusion.com/windowsforms/chart/overview) +- [Syncfusion WinForms Chart API Reference](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Windows.Forms.Chart.ChartControl.html) \ No newline at end of file