Implementing a Fan Chart | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Implementing a Fan Chart

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 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

WPF sample – FanChart_WPF.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

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed