# Creating the Chart Control with Code

Learn how you can create a chart control with code using Spread for ASP.NET. Learn more in documentation.

## Content

You can create a chart with Spread methods or you can create a chart by using Chart classes and then adding the chart to Spread.
There is a Spread [AddChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AddChart.html) method and a [SpreadChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Chart.SpreadChart.-ctor.html) constructor that can be used to create a Chart control. The [AddChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AddChart.html) method and the **SpreadChart** constructor have overloads that allow you to specify the cell range to get the data from, the type of series, height and width of the chart, location of the chart, the view type of the chart, and whether to show a legend.
You can control how empty cell data is displayed in the Chart control with the [DataSetting](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.Chart.SpreadChart.DataSetting.html) property.
For more information on using Chart classes, see the [Creating Plot Types](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-chart/spweb-chartcreate/spweb-chartcreatetypes) topic.

## Using Code

Add values to cells and then use the [AddChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AddChart.html) method to add a Chart control to Spread.

## Example

The following example uses the [AddChart](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.SheetView.AddChart.html) method.

```csharp
FpSpread1.Sheets[0].RowCount = 10;
FpSpread1.Sheets[0].ColumnCount = 10;
FpSpread1.Sheets[0].Cells[0, 1].Value = "c1";
FpSpread1.Sheets[0].Cells[0, 2].Value = "c2";
FpSpread1.Sheets[0].Cells[0, 3].Value = "c3";
FpSpread1.Sheets[0].Cells[1, 0].Value = "s1";
FpSpread1.Sheets[0].Cells[2, 0].Value = "s2";
FpSpread1.Sheets[0].Cells[3, 0].Value = "s3";
FpSpread1.Sheets[0].Cells[4, 0].Value = "s4";
FpSpread1.Sheets[0].Cells[1, 1].Value = 1;
FpSpread1.Sheets[0].Cells[2, 1].Value = 2;
FpSpread1.Sheets[0].Cells[3, 1].Value = 3;
FpSpread1.Sheets[0].Cells[4, 1].Value = 4;
FpSpread1.Sheets[0].Cells[1, 2].Value = 7;
FpSpread1.Sheets[0].Cells[2, 2].Value = 8;
FpSpread1.Sheets[0].Cells[3, 2].Value = 9;
FpSpread1.Sheets[0].Cells[4, 2].Value = 10;
FpSpread1.Sheets[0].Cells[1, 3].Value = 13;
FpSpread1.Sheets[0].Cells[2, 3].Value = 14;
FpSpread1.Sheets[0].Cells[3, 3].Value = 15;
FpSpread1.Sheets[0].Cells[4, 3].Value = 16;
FarPoint.Web.Spread.Model.CellRange range = new FarPoint.Web.Spread.Model.CellRange(0, 0, 4, 4);
FpSpread1.Sheets[0].AddChart(range, typeof(FarPoint.Web.Chart.ClusteredBarSeries), 200, 200, 0, 0, FarPoint.Web.Chart.ChartViewType.View3D, false);
```

```vbnet
FpSpread1.Sheets(0).RowCount = 10
FpSpread1.Sheets(0).ColumnCount = 10
FpSpread1.Sheets(0).Cells(1, 0).Value = "s1"
FpSpread1.Sheets(0).Cells(2, 0).Value = "s2"
FpSpread1.Sheets(0).Cells(3, 0).Value = "s3"
FpSpread1.Sheets(0).Cells(4, 0).Value = "s4"
FpSpread1.Sheets(0).Cells(0, 1).Value = "c1"
FpSpread1.Sheets(0).Cells(1, 1).Value = 1
FpSpread1.Sheets(0).Cells(2, 1).Value = 2
FpSpread1.Sheets(0).Cells(3, 1).Value = 3
FpSpread1.Sheets(0).Cells(4, 1).Value = 4
FpSpread1.Sheets(0).Cells(0, 2).Value = "c2"
FpSpread1.Sheets(0).Cells(1, 2).Value = 7
FpSpread1.Sheets(0).Cells(2, 2).Value = 8
FpSpread1.Sheets(0).Cells(3, 2).Value = 9
FpSpread1.Sheets(0).Cells(4, 2).Value = 10
FpSpread1.Sheets(0).Cells(0, 3).Value = "c3"
FpSpread1.Sheets(0).Cells(1, 3).Value = 13
FpSpread1.Sheets(0).Cells(2, 3).Value = 14
FpSpread1.Sheets(0).Cells(3, 3).Value = 15
FpSpread1.Sheets(0).Cells(4, 3).Value = 16
Dim range As New FarPoint.Web.Spread.Model.CellRange(0, 0, 4, 4)
FpSpread1.Sheets(0).AddChart(range, GetType(FarPoint.Web.Chart.ClusteredBarSeries), 200, 200, 0, 0, FarPoint.Web.Chart.ChartViewType.View3D, False)
```

### Using Code

You can also use chart classes to create a chart and then add the chart to the Spread control.

### Example

The following example demonstrates creating a Y Plot chart and adding unbound data to the control.

```csharp
BarSeries series = new 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);
YPlotArea plotArea = new YPlotArea();
plotArea.Location = new PointF(0.2f, 0.2f);
plotArea.Size = new SizeF(0.6f, 0.6f);
plotArea.Series.Add(series);
LabelArea label = new LabelArea();
label.Text = "Bar Chart";
label.Location = new PointF(0.5f, 0.02f);
label.AlignmentX = 0.5f;
label.AlignmentY = 0.0f;
LegendArea legend = new LegendArea();
legend.Location = new PointF(0.98f, 0.5f);
legend.AlignmentX = 1.0f;
legend.AlignmentY = 0.5f;
ChartModel model = new ChartModel();
model.LabelAreas.Add(label);
model.LegendAreas.Add(legend);
model.PlotAreas.Add(plotArea);
FarPoint.Web.Spread.Chart.SpreadChart chart = new FarPoint.Web.Spread.Chart.SpreadChart();
chart.Model = model;
FpSpread1.Sheets[0].Charts.Add(chart);
```

```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 PointF(0.2F, 0.2F)
plotArea.Size = New SizeF(0.6F, 0.6F)
plotArea.Series.Add(series)
Dim label As New FarPoint.Web.Chart.LabelArea()
label.Text = "Bar Chart"
label.Location = New PointF(0.5F, 0.02F)
label.AlignmentX = 0.5F
label.AlignmentY = 0.0F
Dim legend As New FarPoint.Web.Chart.LegendArea()
legend.Location = New 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)
Dim chart As New FarPoint.Web.Spread.Chart.SpreadChart()
chart.Model = model
FpSpread1.Sheets(0).Charts.Add(chart)
```