# Fill Effects

Spread for ASP.NET allows you to customize the charts by using fill effects. Types of fill effects are solid, gradient, and image.

## Content

A fill effect is when the interior of an object is painted. Three types of fill effects are solid, gradient, and image. A solid fill effect uses a single color and a gradient fill uses two colors and a direction. An image fill effect uses an image instead of a color for the fill.
The following elements can have fill effects: label, legend, wall, stripe, and the chart itself.
The following fill effects are available in the [Fill](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Fill.html) class:

* No Fill
* Solid Fill
* Image Fill
* Gradient Fill

You can fill elements using the **Fill** property in the following classes:

* [ChartModel](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.ChartModel.Fill.html)
* [LabelArea](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.LabelArea.Fill.html)
* [LegendArea](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.LegendArea.Fill.html)
* [Stripe](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Stripe.Fill.html)
* [Wall](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Wall.Fill.html)

To set the fill effect for the entire plot area, you can set the [Fill](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Wall.Fill.html) property of the wall for the plot area. For example, for a y-plot, you can set the fill of the wall set by the [BackWall](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.YPlotArea.BackWall.html) property in the [YPlotArea](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.YPlotArea.html) class.
**Using Code**

1. Create a series.
2. Use fill properties to change the color of the bars in the chart.
3. Add the series to the plot area.

**Example**
The following example sets a fill effect for a bar.

```csharp
BarSeries series = new BarSeries();
series.BarFill = new SolidFill(Color.Red);
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);
ChartModel model = new ChartModel();
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.BarFill = New FarPoint.Web.Chart.SolidFill(System.Drawing.Color.Red)
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 model As New FarPoint.Web.Chart.ChartModel()
model.PlotAreas.Add(plotArea)
Dim chart As New FarPoint.Web.Spread.Chart.SpreadChart()
chart.Model = model
FpSpread1.Sheets(0).Charts.Add(chart)
```

**Using Code**
You can set the fill effect before or after adding the data points if you set the fill effect for the entire series.
**Example**
The following example sets a fill effect for a bar.

```csharp
BarSeries series = new BarSeries();
series.BarFill = new SolidFill(Color.Red);
series.Values.Add(2.0);
\\ OR
BarSeries series = new BarSeries();
series.Values.Add(2.0);
series.BarFill = new SolidFill(Color.Red);
```

```vbnet
Dim series As New FarPoint.Web.Chart.BarSeries()
series.BarFill = New SolidFill(Color.Red)
series.Values.Add(2.0)
' OR
Dim series As New FarPoint.Web.Chart.BarSeries()
series.Values.Add(2.0)
series.BarFill = New SolidFill(Color.Red)
```

**Using Code**
If you set the fill effect for a single data point, then you need to assign the fill effect after you add the data point, so there is a data point to store the fill effect in.
**Example**
The following example sets a fill effect for a bar.

```csharp
BarSeries series = new BarSeries();
series.Values.Add(2.0);
series.Values.Add(4.0);
series.BarFills.Add(new SolidFill(Color.Green));
```

```vbnet
Dim series As New FarPoint.Web.Chart.BarSeries()
series.Values.Add(2.0)
series.Values.Add(4.0)
series.BarFills.Add(New SolidFill(Color.Green))
```

**Using Code**
You can assign fill effects for lines and markers as well.
**Example**
The following example sets a fill effect for a marker.

```csharp
PointSeries series = new PointSeries();
series.PointFill = new SolidFill(Color.Lime);
series.PointBorder = new SolidLine(Color.Red);
series.PointMarker = new BuiltinMarker(MarkerShape.Triangle, 10.0f);
series.Values.Add(2.0);
series.Values.Add(4.0);
series.Values.Add(3.0);
series.Values.Add(5.0);
```

```vbnet
Dim series As New PointSeries()
series.PointFill = New SolidFill(Color.Lime)
series.PointBorder = New SolidLine(Color.Red)
series.PointMarker = New BuiltinMarker(MarkerShape.Triangle, 10F)
series.Values.Add(2.0)
series.Values.Add(4.0)
series.Values.Add(3.0)
series.Values.Add(5.0)
```

## Using the Chart Designer

1. Create a chart with values.
2. Select the series.
3. Select the **Fill** option.
4. Set properties as needed.
5. Select **Apply** and **OK** to close the Chart Designer.