# Using the Chart Control

Learn how to use the FpChart control in Visual Studio to create and customize chart controls for your forms.

## Content

The Chart ([FpChart](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.FpChart.html)) control appears in the Visual Studio toolbox as the icon in the following image.
![Chart Control](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/fpchartwin.png)
You can add chart controls to your form by dragging the FpChart control from the toolbox. Chart controls added to the form can be set using the chart designer or in code as follows:

> !type=note
> **Note:** Chart controls can be saved and loaded into files or streams. See "[Save/Load Chart Control](/spreadnet/docs/latest/online-win/overview/spwin-devguide/fpchart-devguide/fpchart-chartcreate/spwin-chartcontrol/spwin-chartcontrolxml)" for more information.

## Using the Chart Designer

1. Drag the FpChart control from the toolbox onto the form.
2. You can launch the Chart Designer by selecting **Designer** from the smart tags of the FpChart control.

![Chart Designer](https://cdn.mescius.io/document-site-files/images/2238e618-a1fb-45a6-9ce5-9a4157bd2931/images/chartverb1.png)

> !type=note
> **Note:** For information on creating graphs using the Chart Designer, see [Chart Designer](/spreadnet/docs/latest/online-win/overview/spwin-designerguide/fpchart-chartdesigner).

You can also use code to set the FpChart control without using the chart designer. The code used is similar to the code used to add a chart on a SPREAD sheet.

## Using the code

1. Create a series object and add data.
2. Create plot area using the [YPlotArea](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.YPlotArea.html) class.
3. Set the position and size of the plot area.
4. Add the series object created in step 1 to the plot area.
5. Create a label and legend area to display the title.
6. Create a chart model and add plot areas, labels, and legend areas.
7. Set the [Model](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.FpChart.Model.html) property of the [FpChart](/spreadnet/api/latest/online-win/FarPoint.Win.Chart/FarPoint.Win.Chart.FpChart.html) control to the chart model created in step 6.

## Example

The following example demonstrate how to use the FpChart control to create a bar chart.

```csharp
FarPoint.Win.Chart.BarSeries series = new FarPoint.Win.Chart.BarSeries();
series.SeriesName = "Series 0";
series.Values.Add(2.0);
series.Values.Add(4.0);
series.Values.Add(3.0);
series.Values.Add(5.0);
FarPoint.Win.Chart.YPlotArea plotArea = new FarPoint.Win.Chart.YPlotArea();
plotArea.Location = new System.Drawing.PointF(0.2f, 0.2f);
plotArea.Size = new System.Drawing.SizeF(0.6f, 0.6f);
plotArea.Series.Add(series);
FarPoint.Win.Chart.LabelArea label = new FarPoint.Win.Chart.LabelArea();
label.Text = "Bar Chart";
label.Location = new System.Drawing.PointF(0.5f, 0.02f);
label.AlignmentX = 0.5f;
label.AlignmentY = 0.0f;
FarPoint.Win.Chart.LegendArea legend = new FarPoint.Win.Chart.LegendArea();
legend.Location = new System.Drawing.PointF(0.98f, 0.5f);
legend.AlignmentX = 1.0f;
legend.AlignmentY = 0.5f;
FarPoint.Win.Chart.ChartModel model = new FarPoint.Win.Chart.ChartModel();
model.LabelAreas.Add(label);
model.LegendAreas.Add(legend);
model.PlotAreas.Add(plotArea);
fpChart1.Model = model;
```

```vbnet
Dim series As New FarPoint.Win.Chart.BarSeries()
series.SeriesName = "Series 0"
series.Values.Add(2.0)
series.Values.Add(4.0)
series.Values.Add(3.0)
series.Values.Add(5.0)
Dim plotArea As New FarPoint.Win.Chart.YPlotArea()
plotArea.Location = New System.Drawing.PointF(0.2F, 0.2F)
plotArea.Size = New System.Drawing.SizeF(0.6F, 0.6F)
plotArea.Series.Add(series)
Dim label As New FarPoint.Win.Chart.LabelArea()
label.Text = "Bar Chart"
label.Location = New System.Drawing.PointF(0.5F, 0.02F)
label.AlignmentX = 0.5F
label.AlignmentY = 0.0F
Dim legend As New FarPoint.Win.Chart.LegendArea()
legend.Location = New System.Drawing.PointF(0.98F, 0.5F)
legend.AlignmentX = 1.0F
legend.AlignmentY = 0.5F
Dim model As New FarPoint.Win.Chart.ChartModel()
model.LabelAreas.Add(label)
model.LegendAreas.Add(legend)
model.PlotAreas.Add(plotArea)
FpChart1.Model = model
```

## See Also

[Using the Chart Control on sheet](/spreadnet/docs/latest/online-win/overview/spwin-devguide/fpchart-devguide/fpchart-chartcreate/spwin-sheet-chart)
[Creating Plot Types](/spreadnet/docs/latest/online-win/overview/spwin-devguide/fpchart-devguide/fpchart-chartcreate/fpchart-createplot)
[Connecting to Data](/spreadnet/docs/latest/online-win/overview/spwin-devguide/fpchart-devguide/fpchart-chartcreate/fpchart-chartdata)
[Advanced chart settings](/spreadnet/docs/latest/online-win/overview/spwin-devguide/fpchart-devguide/fpchart-chartcreate/fpchart-chartcustom)