# Lighting, Shapes, and Borders

Customize charts by applying color effects to it or by specifying the position and the direction of the light using Spread for ASP.NET.

## Content

You can set borders for most areas of the chart. See the [LineBorder](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.LineSeries.LineBorder.html) and [PointBorder](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.LineSeries.PointBorder.html) properties in the [LineSeries](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.LineSeries.html) class for more information. The [XYBubbleSeries](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.XYBubbleSeries.html) class has additional border settings such as [NegativeBorder](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.XYBubbleSeries.NegativeBorder.html) and [PositiveBorder](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.XYBubbleSeries.PositiveBorder.html).
You can set shapes such as the bar shape. See the [BarShape](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.HighLowBarSeries.BarShape.html) property for more information.
You can apply additional effects to the 3D Chart control such as color, directional lighting, and positional lighting. Directional lighting mimics a distant light source such as rays from the sun (parallel paths). Positional lighting mimics a close light source such as a lamp where the light radiates out from a single point.
The following image displays a graph that uses light colors, direction, and position:
![Lighting Effects](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/chartlight.png)
The following color effects are available:

* [AmbientColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.AmbientColor.html)
* [DiffuseColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.DiffuseColor.html)
* [SpecularColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.SpecularColor.html)

You can specify the position and the direction of the light with the following properties:

* [PositionX](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionX.html)
* [PositionY](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionY.html)
* [PositionZ](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionZ.html)
* [DirectionX](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionX.html)
* [DirectionY](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionY.html)
* [DirectionZ](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionZ.html)

## Using Code

1. Create a series.
2. Add values to the series.
3. Create a plot area.
4. Set the [AmbientColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.AmbientColor.html), [DiffuseColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.DiffuseColor.html), and [SpecularColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.SpecularColor.html) in the [PositionalLight](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.html) class.
5. Set the [PositionX](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionX.html), [PositionY](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionY.html), and [PositionZ](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.PositionZ.html) properties in the [PositionalLight](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.PositionalLight.html) class.
6. Set the [AmbientColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.AmbientColor.html), [DiffuseColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.DiffuseColor.html), and [SpecularColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.Light.SpecularColor.html) in the [DirectionalLight](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.html) class.
7. Set the [DirectionX](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionX.html), [DirectionY](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionY.html), and [DirectionZ](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.DirectionZ.html) properties in the [DirectionalLight](/spreadnet/api/latest/online-asp/FarPoint.Web.Chart/FarPoint.Web.Chart.DirectionalLight.html) class.
8. Add the light settings to the plot area.
9. Create a chart model and assign the plot area settings to it.
10. Create a chart and assign the chart model to it.
11. Add the chart to the Spread control.

## Example

The following example demonstrates using light colors, direction, and position.

```csharp
FarPoint.Web.Chart.PieSeries series = new FarPoint.Web.Chart.PieSeries();
series.SeriesName = "Series 1";
series.TopBevel = new FarPoint.Web.Chart.CircleBevel(12.0f, 12.0f);
series.BottomBevel = new FarPoint.Web.Chart.CircleBevel(12.0f, 12.0f);
series.Values.Add(1.0);
series.Values.Add(2.0);
series.Values.Add(4.0);
series.Values.Add(8.0);
FarPoint.Web.Chart.PiePlotArea plotArea = new FarPoint.Web.Chart.PiePlotArea();
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.PositionalLight light0 = new FarPoint.Web.Chart.PositionalLight();
light0.AmbientColor = System.Drawing.Color.FromArgb(64, 64, 64);
light0.DiffuseColor = System.Drawing.Color.FromArgb(64, 64, 64);
light0.SpecularColor = System.Drawing.Color.FromArgb(128, 128, 128);
light0.PositionX = 0.0f;
light0.PositionY = 0.0f;
light0.PositionZ = 100.0f;
FarPoint.Web.Chart.DirectionalLight light1 = new FarPoint.Web.Chart.DirectionalLight();
light1.AmbientColor = System.Drawing.Color.FromArgb(64, 64, 64);
light1.DiffuseColor = System.Drawing.Color.FromArgb(64, 64, 64);
light1.SpecularColor = System.Drawing.Color.FromArgb(128, 128, 128);
light1.DirectionX = 1.0f;
light1.DirectionY = 0.0f;
light1.DirectionZ = 1.0f;
FarPoint.Web.Chart.ChartModel model = new FarPoint.Web.Chart.ChartModel();
model.PlotAreas.Add(plotArea);
model.PlotAreas[0].Lights.Clear();
model.PlotAreas[0].Lights.Add(light0);
model.PlotAreas[0].Lights.Add(light1);
FarPoint.Web.Spread.Chart.SpreadChart chart = new FarPoint.Web.Spread.Chart.SpreadChart();
chart.Model = model;
chart.ViewType = FarPoint.Web.Chart.ChartViewType.View3D;
FpSpread1.Sheets[0].Charts.Add(chart);
```

```vbnet
Dim series As New FarPoint.Web.Chart.PieSeries()
series.SeriesName = "Series 1"
series.TopBevel = New FarPoint.Web.Chart.CircleBevel(12.0F, 12.0F)
series.BottomBevel = New FarPoint.Web.Chart.CircleBevel(12.0F, 12.0F)
series.Values.Add(1.0)
series.Values.Add(2.0)
series.Values.Add(4.0)
series.Values.Add(8.0)
Dim plotArea As New FarPoint.Web.Chart.PiePlotArea()
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 light0 As New FarPoint.Web.Chart.PositionalLight()
light0.AmbientColor = System.Drawing.Color.FromArgb(64, 64, 64)
light0.DiffuseColor = System.Drawing.Color.FromArgb(64, 64, 64)
light0.SpecularColor = System.Drawing.Color.FromArgb(128, 128, 128)
light0.PositionX = 0.0F
light0.PositionY = 0.0F
light0.PositionZ = 100.0F
Dim light1 As New FarPoint.Web.Chart.DirectionalLight()
light1.AmbientColor = System.Drawing.Color.FromArgb(64, 64, 64)
light1.DiffuseColor = System.Drawing.Color.FromArgb(64, 64, 64)
light1.SpecularColor = System.Drawing.Color.FromArgb(128, 128, 128)
light1.DirectionX = 1.0F
light1.DirectionY = 0.0F
light1.DirectionZ = 1.0F
Dim model As New FarPoint.Web.Chart.ChartModel()
model.PlotAreas.Add(plotArea)
model.PlotAreas(0).Lights.Clear()
model.PlotAreas(0).Lights.Add(light0)
model.PlotAreas(0).Lights.Add(light1)
Dim chart As New FarPoint.Web.Spread.Chart.SpreadChart()
chart.Model = model
chart.ViewType = FarPoint.Web.Chart.ChartViewType.View3D
FpSpread1.Sheets(0).Charts.Add(chart)
```

## Using the Chart Designer

1. Select the **Plot Areas Collection**.
2. Select the **Light Collection** editor.
3. Set properties as needed.
4. Select **Apply** and **OK** to close the Chart Designer.