--- title: "Chart of the Week: Creating a WPF Multiple Fast Line Chart to Display COVID-19’s Impact on U.S. Unemployment" published_at: "2023-08-24T12:43:38+00:00" modified_at: "2025-04-22T08:19:08+00:00" url: "https://www.syncfusion.com/blogs/post/wpf-multi-fast-line-chart-covid-19-unemployment" excerpt: "This blog explains how to visualize the impact of COVID-19 on unemployment using the Syncfusion WPF multiple Fast Line Chart." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Syncfusion" - "UI" - "WPF" taxonomy_post_tag: - "Charts" - "Data Visualization" - "desktop" - "Syncfusion" - "WPF" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Chart of the Week: Creating a WPF Multiple Fast Line Chart to Display COVID-19’s Impact on U.S. Unemployment [Moneeshram Dhanabal](https://www.syncfusion.com/blogs/author/moneeshram-dhanabal) ![Chart of the Week Creating a WPF Multiple Fast Line Chart to Display COVID-19's Impact on U.S. Unemployment](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Chart-of-the-Week-Creating-a-WPF-Multiple-Fast-Line-Chart-to-Display-COVID-19s-Impact-on-U.S.-Unemployment-1.png) Welcome to our **Chart of the Week** blog series! In today’s blog, we’ll use the [Syncfusion WPF Fast Line Chart](https://help.syncfusion.com/wpf/charts/fastchart/fast-series#fast-line) to create a multiple-line chart that displays the impact of COVID-19 on unemployment rates for different reasons. Please note that this control is only supported on Windows desktops. The [U.S. Bureau of Labor Statistics](https://www.bls.gov/cex/cecomparison/cps_profile.htm) describes the [Current Population Survey (CPS)](https://www.census.gov/programs-surveys/cps.html) as “a monthly survey of households conducted by the Bureau of Census for the Bureau of Labor Statistics.” According to its site, the survey offers a “comprehensive body of data on the [labor force](https://www.bls.gov/cps/lfcharacteristics.htm#laborforce) , [employment](https://www.bls.gov/cps/lfcharacteristics.htm#emp) , [unemployment](https://www.bls.gov/cps/lfcharacteristics.htm#unemp) , persons [not in the labor force](https://www.bls.gov/cps/lfcharacteristics.htm#nlf) , [hours of work](https://www.bls.gov/cps/lfcharacteristics.htm#hours) , [earnings](https://www.bls.gov/cps/earnings.htm) , and other [labor force characteristics](https://www.bls.gov/cps/lfcharacteristics.htm) . To assess the key indicators and the reasons for unemployment during COVID-19, the data on unemployed people has been visualized in a graph. Let’s see how to create a multiple-line chart using the **Syncfusion WPF Fast Line Chart** control to visualize COVID-19 economic trends. We have chosen the fast line chart because it displays a considerable volume of data in a few seconds and provides smooth interactions. ## Step 1: Gathering the data on unemployment Before creating the chart, we gather data on unemployment from the [U.S. Bureau of Labor Statistics](https://data.bls.gov/apps/covid-dashboard/home.htm) . As I said previously, we obtain data on [COVID-19 Economic Trends](https://data.bls.gov/apps/covid-dashboard/home.htm) and choose the chart **Reasons for unemployment**. You can export the ** CSV**file from the bottom of the chart page using the ** Show Table** button. ## Step 2: Preparing the data for the WPF multiple Fast Line Chart We need to convert the CSV data into a collection to create a multiple fast line series chart in WPF. To do so, let’s define the **JoblessCategory** model class to hold monthly data on the unemployment causes (completed temporary jobs, not on temporary layoffs, job leavers, reentrants, and new entrants) using the appropriate property names. Refer to the following code example. ``` public class JoblessCategory { public DateTime Month { get; set; } public double CompletedTempJobs { get; set; } public double NotOnTempLayoff { get; set; } public double OnTemporaryLayoff { get; set; } public double JobLeavers { get; set; } public double Reentrants { get; set; } public double NewEntrants { get; set; } public JoblessCategory(DateTime month, double jobless1, double jobless2, double jobless3, double jobless4, double jobless5, double jobless6) { Month = month; CompletedTempJobs = jobless1; NotOnTempLayoff = jobless2; OnTemporaryLayoff = jobless3; JobLeavers = jobless4; Reentrants = jobless5; NewEntrants = jobless6; } } ``` To generate an ObservableCollection of the **JoblessCategory** model type and its properties, we need to [load the CSV data into the WPF chart](https://support.syncfusion.com/kb/article/12325/how-to-bind-the-csv-data-in-wpf-chart-sfchart) . To do so, read the CSV data path file using the **ReadCSV** method in the ** ViewModel** class. Then, convert each set of data to a collection of strings; split each line of string at a specific, comma-separated place; and store it in the ** Model** class objects. Add them to the collection and return it. Finally, call the **ReadCSV** method to set the collection to the ** UnemploymentData** collection in the ** ViewModel** class. ``` public class ViewModel { private List unemployedData = new List(); private JoblessCategory? model; public List UnemploymentData { get; set; } public ViewModel() { UnemploymentData = new List(ReadCSV("COVID19_MultiLine_Chart.bls_table.csv")); } public IEnumerable ReadCSV(string fileName) { Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly; Stream inputStream = executingAssembly.GetManifestResourceStream(fileName); if (inputStream != null) { string line; List lines = new List(); StreamReader reader = new StreamReader(inputStream); while ((line = reader.ReadLine()) != null) { lines.Add(line); } lines.RemoveAt(0); for (int i = 0; i < lines.Count; i++) { string input = lines[i]; if (input.EndsWith(",")) input = input.TrimEnd(','); // Split by comma, excluding the ones inside quotes string[] data = input.Split(new[] { "\",\"" }, StringSplitOptions.None); // Remove leading and trailing quotes from each part for (int j = 0; j < data.Length; j++) { data[j] = data[j].Trim('\"'); } DateTime resultDate = DateTime.ParseExact(data[0], "MMM yyyy", CultureInfo.InvariantCulture); model = new JoblessCategory(resultDate, Convert.ToDouble(data[1]), Convert.ToDouble(data[2]), Convert.ToDouble(data[3]), Convert.ToDouble(data[4]), Convert.ToDouble(data[5]), Convert.ToDouble(data[6])); unemployedData.Add(model); } } return unemployedData; } } ``` ## Step 3: Configuring the WPF multiple Fast Line Chart Let’s configure the Syncfusion WPF Charts control using this [documentation](https://help.syncfusion.com/wpf/charts/getting-started) . Here, we’ll use the Syncfusion **FastLineSeries** instance to visualize the differences among the various reasons for unemployment during the COVID-19 pandemic. Refer to the following code example. ``` ``` In the previous code example, we’ve bound the **ItemsSource** property to the ** UnemploymentData** objects containing properties of various unemployment reasons as ** double** objects. We specified each ** Month** as ** XBindingPath** and unemployment reasons as properties to each series ** YBindingPath**. This will tell the chart which data points to utilize for the x- and y-axes. ## Step 4: Customizing the chart appearance We can also customize the appearance of the chart by adding a custom tooltip, titles, and a legend. ### Customizing the chart title Refer to the following code example to customize the chart’s title using the **Header** property and set its position using the ** HorizontalHeaderAlignment** property. ``` . . . . . . ``` ### Customizing the chart axes Let’s customize the **DateTimeAxis** elements using the ** IntervalType** and ** LabelFormat** properties and the ** NumericalAxis** using the ** Header**, ** LabelExtent,**and ** Interval** properties and the ** LabelCreated** event. ``` ``` Refer to the following code example to format the numerical axis labels using the **LabelCreated** event. ``` private void NumericalAxis_LabelCreated(object sender, LabelCreatedEventArgs e) { if(e.AxisLabel is ChartAxisLabel label && label.LabelContent is string content && content != "0") { var value = double.Parse(content) / 1000000; label.LabelContent = value.ToString()+"M"; } } ``` ### Customizing the chart tooltips We can customize the background of the chart tooltip using the **Style** property of the ** ChartTooltipBehavior**. Create a style of target type ** Path** as a resource and define the desired background. Then, set the style key to the ** Style** property, as shown in the following code example. ``` ``` We can also design a custom tooltip using the **TooltipTemplate** property. For this, create a data template to display the month and unemployment rate values. Create a separate tooltip template for each series. We need to set a specific template key for each series, as shown in the following code example. ``` . . . . . . . . . . . . . . . ``` ### Customizing the chart legend To customize and wrap the **ChartLegend** items, create an ** ItemsPanelTemplate** as a ** WrapPanel** with vertical orientation and set a specific height to split items evenly in rows and columns. Then, set the key value to the legend ** ItemsPanel** property. Additionally, enable the **ToggleSeriesVisibility** support in the legend to filter the unemployment causes data of each series. ``` ``` To hide certain series, set the **IsSeriesVisible** property value to ** false** for that series. However, when toggling the legend icon, those hidden series will become visible again. In the following code, I’ve also changed the legend icon’s shape to a circle using the ** LegendIcon** property. ``` . . . //Similar for all other series. . . ``` ### Highlighting the chart series based on interaction A series will be highlighted when the tooltip is invoked on it. To achieve this, we use the **MouseEnter** event in each series. When the pointer hovers over a series in the chart, the ** MouseEnter** event of the series will be called. Then, the ** StrokeThickness** of the mouse interacting series will increase, and the stroke thickness for the remaining series will be set to the default value. When the pointer moves out of the chart area, the **MouseLeave** event will be called, resetting the ** StrokeThickness** to default in all the series, as demonstrated in the following code example. **XML** ``` . . . //Chart header . . . . . . . . . //Chart axis and legend . . . . . . . . . //Similar for all other series. . . . . . ``` **C#** ``` private void SfChart_MouseEnter(object sender, MouseEventArgs e) { if (sender is ChartSeries series) { foreach(var chartSeries in chart.Series) { if(chartSeries != series) { chartSeries.StrokeThickness = 2; } else { series.StrokeThickness = 4; } } } } private void FastLineSeries_MouseLeave(object sender, MouseEventArgs e) { foreach (var chartSeries in chart.Series) { chartSeries.StrokeThickness = 2; } } ``` After executing these code examples, we will get the output as shown in the following image. ![Visualizing COVID-19 impact on unemployment using Syncfusion WPF multiple Fast Line Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Visualizing-COVID-19-impact-on-unemployment-using-Syncfusion-WPF-multiple-Fast-Line-Chart-1.png) Visualizing COVID-19 impact on unemployment using Syncfusion WPF multiple Fast Line Chart ## GitHub reference For more details, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Multiple-Line-Chart-showing-Various-Reasons-for-Unemployment-during-COVID19) . ## Conclusion Thanks for reading! In this blog, we have seen how to visualize the COVID-19 pandemic’s impact on unemployment using the [Syncfusion WPF multiple fast-line charts](https://help.syncfusion.com/wpf/charts/fastchart/fast-series) . Like this, you can also visualize other trends and changes over time. We encourage you to try the steps discussed and share your thoughts in the comments below. If you require assistance, please don’t hesitate to contact us via our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always eager to help you! ## Related blogs - [Visualize JSON Data Quickly Using WPF Charts](https://www.syncfusion.com/blogs/post/visualize-json-data-wpf-charts.aspx) - [Seamlessly Load Data from Different Data Sources into WPF Charts](https://www.syncfusion.com/blogs/post/different-data-source-wpf-charts.aspx) - [Chart of the Week: Visualize the Transfer Spending and Earning among the Football League Clubs Using WPF Scatter Chart](https://www.syncfusion.com/blogs/post/visualize-transfer-spending-earning-wpf-scatter-chart.aspx) - [Chart of the Week: Creating a WPF Range Column Chart to Visualize ChatGPT’s Performance in Competitive Exams](https://www.syncfusion.com/blogs/post/wpf-range-column-chart-visualize-chatgpt-performance.aspx)