# Creating the Chart Control

Spread for ASP.NET allows you to create a Chart control with code or with the Chart Designer. Learn more in documentation.

## Content

You can create a Chart control with code or with the Chart Designer. Select the Chart control, click on the chart verb, and then select **Designer** to bring up the Chart Designer.
![Chart Verb](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/chartverb1.png)
You can also create a chart with code. The code is similar to using the Chart control in Spread; however, you do not need the [AddChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AddChart.html) method in this case.

## Using Code

1. Use the [BarSeries](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.BarSeries.html) class to add data to a Chart control.
2. Use the [YPlotArea](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.YPlotArea.html) class to create a plot area.
3. Set the location and size of the plot area.
4. Add the series to the plot area.
5. Create a label and legend for the chart.
6. Create a chart model and add the plot area, label, and legend to the model.
7. Add the chart model to the Chart control.

## Example

The following example creates a bar type chart with a label and legend.

```csharp
FarPoint.Web.Chart.BarSeries series = new FarPoint.Web.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.Web.Chart.YPlotArea plotArea = new FarPoint.Web.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.Web.Chart.LabelArea label = new FarPoint.Web.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.Web.Chart.LegendArea legend = new FarPoint.Web.Chart.LegendArea();
legend.Location = new System.Drawing.PointF(0.98f, 0.5f);
legend.AlignmentX = 1.0f;
legend.AlignmentY = 0.5f;
FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
model.LabelAreas.Add(label);
model.LegendAreas.Add(legend);
model.PlotAreas.Add(plotArea);
FpChart1.Model = model;
```

```vbnet
Dim series As New FarPoint.Web.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.Web.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.Web.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.Web.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.Web.Chart.ChartModel()
model.LabelAreas.Add(label)
model.LegendAreas.Add(legend)
model.PlotAreas.Add(plotArea)
FpChart1.Model = model
```

## See Also

[Model Property](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.FpChart.Model.html)