---
title: "Implementing a Fan Chart"
published_at: "2012-06-29T07:54:00+00:00"
modified_at: "2025-04-23T11:22:27+00:00"
url: "https://www.syncfusion.com/blogs/post/implementing-a-fan-chart"
excerpt: "Fan chart series draws a line for the given actual y-values and draws colored bands over certain ranges to illustrate the uncertainty in the projections. You can find more details from this wiki link – https://en.wikipedia.org/wiki/Fan_chart_(time_series). By using Syncfusion’s multiple..."
taxonomy_category:
  - "ASP.NET"
  - "ASP.NET MVC"
  - "Chart"
  - "Desktop"
  - "Development"
  - "UI"
  - "User interface"
  - "Windows Forms"
  - "WPF"
---

# Implementing a Fan Chart

[Jay Natarajan](https://www.syncfusion.com/blogs/author/jayn)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2018/08/fan_chart_9389f84f.png)


Fan chart series draws a line for the given actual y-values and draws colored bands over certain ranges to illustrate the uncertainty in the projections. You can find more details from this wiki link – [https://en.wikipedia.org/wiki/Fan_chart_(time_series)](https://en.wikipedia.org/wiki/Fan_chart_(time_series))
. By using Syncfusion’s multiple range area chart type, you can plot a Fan Chart series.

Below table shows data collection for a Fan chart:

| DateTime(X-value) | Actual Value | Projected Min Value | Var1 | Var2 | Var3 | Var4 | Projected Max Value |
| --- | --- | --- | --- | --- | --- | --- | --- |
| July 2011 | 24 | – | – | – | – | – | – |
| Oct 2011 | 32 | – | – | – | – | – | – |
| Jan 2012 | 16 | – | – | – | – | – | – |
| Apr 2012 | 45 | – | – | – | – | – | – |
| July 2012 | 30 | – | – | – | – | – | – |
| Oct 2012 | – | 5 | 10 | 20 | 50 | 60 | 65 |
| Jan 2013 | – | 10 | 15 | 30 | 60 | 70 | 75 |
| Apr 2013 | – | 20 | 25 | 50 | 70 | 80 | 85 |
| July 2013 | – | 25 | 30 | 60 | 80 | 90 | 95 |

Actual values are available till July 2012 and after that the collection has projected values from Min to Max with four variant values. To render this data as a Fan chart series, we will copy the actual values to projected values till July 2012. Then use three range charts having the Min & Max, Var1 & Var4, Var3 & Var2 as DataSources. Below find the XAML for WPF implementation:

```
<!--RangeArea series1-->
<syncfusion:chartseries type="RangeArea" datasource="{Binding}" bindingpathx="Date" bindingpathsy="ProjectedMin, ProjectedMax" isindexed="False" showemptypoints="False">
    <syncfusion:chartseries.interior>
        <solidcolorbrush color="Red" opacity="0.2"></solidcolorbrush>
    </syncfusion:chartseries.interior>
    <syncfusion:chartseries.stroke>
        <solidcolorbrush color="Red" opacity="0.2"></solidcolorbrush>
    </syncfusion:chartseries.stroke>
</syncfusion:chartseries>            
<!--RangeArea series2-->
<syncfusion:chartseries type="RangeArea" datasource="{Binding}" bindingpathx="Date" bindingpathsy="Var1, Var4" isindexed="False" showemptypoints="False">
    <syncfusion:chartseries.interior>
        <solidcolorbrush color="Red" opacity="0.4"></solidcolorbrush>
    </syncfusion:chartseries.interior>
    <syncfusion:chartseries.stroke>
        <solidcolorbrush color="Red" opacity="0.4"></solidcolorbrush>
    </syncfusion:chartseries.stroke>
</syncfusion:chartseries>               
 
<!--RangeArea series3-->
<syncfusion:chartseries type="RangeArea" datasource="{Binding}" bindingpathx="Date" bindingpathsy="Var2,Var3" isindexed="False" showemptypoints="False">
    <syncfusion:chartseries.interior>
        <solidcolorbrush color="Red" opacity="0.6"></solidcolorbrush>
    </syncfusion:chartseries.interior>
    <syncfusion:chartseries.stroke>
        <solidcolorbrush color="Red" opacity="0.6"></solidcolorbrush>
    </syncfusion:chartseries.stroke>
</syncfusion:chartseries>
```

![FanChart_wpf](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-10.png "FanChart_wpf")

WPF sample – [FanChart_WPF.zip](https://www.syncfusion.com/downloads/Support/DirectTrac/92509/FanChart_WPF-1669974135.zip)

The same approach can be used to render Fan Chart series for ASP.NET, ASP.NET MVC and Windows Forms platforms. Below find samples:

ASP.NET, ASP.NET MVC and Windows Forms samples – [FanChartSamples.zip](https://www.syncfusion.com/downloads/Support/DirectTrac/94256/FanChartSamples842090148.zip)