--- title: "Chart of the Week: Creating a WinUI Stacked Area Chart to Visualize US Primary Energy Consumption" published_at: "2023-10-11T12:16:28+00:00" modified_at: "2026-01-19T09:37:13+00:00" url: "https://www.syncfusion.com/blogs/post/winui-stacked-area-chart-energy-consumption" excerpt: "This blog explains how to visualize data on primary energy utility consumption in the United States using a Syncfusion WinUI stacked area chart." taxonomy_category: - "Chart" - "Chart of the week" - "Desktop" - "Syncfusion" - "WinUI" taxonomy_post_tag: - "Charts" - "Data Visualization" - "desktop" - "Syncfusion" - "WinUI" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Chart of the Week: Creating a WinUI Stacked Area Chart to Visualize US Primary Energy Consumption [Nanthini Mahalingam](https://www.syncfusion.com/blogs/author/nanthini-mahalingam) ![Chart of the Week: Creating a WinUI Stacked Area Chart to Visualize US Primary Energy Consumption](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Chart-of-the-Week-Creating-a-WinUI-Stacked-Area-Chart-to-Visualize-US-Primary-Energy-Consumption.png) Welcome to the **Chart of the Week** blog series! Today, we’ll visualize the data on primary energy utility consumption in the United States using the Syncfusion [WinUI Stacked Area Chart](https://www.syncfusion.com/winui-controls/cartesian-charts/winui-stacked-area-chart) . When we talk about **primary energy utility consumption**, we’re referring to the raw energy that various sectors of the economy consume. These sectors include residential, commercial, industrial, and transportation. The measurement of this consumption considers the raw energy sources used, such as fossil fuels (coal, natural gas, and petroleum), renewable sources (hydroelectric, solar, and wind), and nuclear energy. In the past two decades, **natural gas** has become the primary source of electricity generation in the United States. This cleaner-burning fossil fuel generates fewer carbon dioxide (CO2) emissions per unit of energy. As concerns about climate change and air pollution grow, people view natural gas as a transitional fuel that can help reduce greenhouse gas emissions compared to more carbon-intensive fossil fuels. Let’s examine the primary energy utility consumption in the United States over the past two decades using the Syncfusion [WinUI Stacked Area Chart](https://help.syncfusion.com/winui/cartesian-charts/stacked#stacked-area-chart) . The following image shows the chart we’re going to build.![Visualizing US Energy Consumption Data Using Syncfusion WinUI Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Visualizing-US-Energy-Consumption-Data-Using-Syncfusion-WinUI-Stacked-Area-Chart-2.gif) ## Step 1: Gather the data on primary energy utility consumption First, we need to gather the data for primary energy utility consumption from the [US Energy Information Administration](https://www.eia.gov/electricity/data/browser/#/topic/2?agg=2,0,1&fuel=vvg&geo=g&sec=8&linechart=ELEC.CONS_TOT.COW-US-1.M&columnchart=ELEC.CONS_TOT.COW-US-1.M&map=ELEC.CONS_TOT.COW-US-1.M&freq=M&start=200101&end=202306&ctype=linechart<ype=pin&rtype=s&pin=&rse=0&maptype=0) . We can download the data in CSV format. ## Step 2: Prepare the data for the Stacked Area Chart Let’s create the **EnergyUtilityProducts** class with ** DateTime** ** Month**, ** Coal**, ** PetroleumLiquid**, ** PetroleumCoke**, ** HydroElectric**, ** Nuclear**, and ** NaturalGas** properties to store each month’s energy utility consumption details. Refer to the following code example. ``` public class EnergyUtilityProducts { public DateTime Month { get; set; } public double Coal { get; set; } public double PetroleumLiquid { get; set; } public double PetroleumCoke { get; set; } public double NaturalGas { get; set; } public double Nuclear { get; set; } public double HydroElectric { get; set; } } ``` Now, create the class **EnergyUtilityConsumption** and add the necessary observable data collections using the ** CollectionOfData** property. This collection will store data for the Coal, PetroleumLiquid, PetroleumCoke, HydroElectric, Nuclear, and NaturalGas properties by converting the CSV data to a collection of data points using the ** ReadCSV** method. ``` public class EnergyUtilityConsumption { public ObservableCollection CollectionOfData { get; set; } public EnergyUtilityConsumption() { CollectionOfData = new ObservableCollection(); ReadCSV("US_Energy_Consumption.Resources.us_energy_consumption_data.csv"); } private void ReadCSV(string resourceStream) { Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly; Stream inputStream = executingAssembly.GetManifestResourceStream(resourceStream); string? line; List lines = new List(); using StreamReader reader = new StreamReader(inputStream); while ((line = reader.ReadLine()) != null) { lines.Add(line); } lines.RemoveAt(0); foreach(var dataPoint in lines) { string[] data = dataPoint.Split(','); DateTime date = DateTime.ParseExact(data[0], "MMM-yy", CultureInfo.InvariantCulture); CollectionOfData.Add(new EnergyUtilityProducts() { Month = date, Coal = Convert.ToDouble(data[1]), PetroleumLiquid = Convert.ToDouble(data[2]), PetroleumCoke = Convert.ToDouble(data[3]), NaturalGas = Convert.ToDouble(data[4]),Nuclear = Convert.ToDouble(data[5]), HydroElectric = Convert.ToDouble(data[6]) }); } } } ``` ## Step 3: Initialize the WinUI Cartesian Chart control and its axis Let’s initialize the WinUI Cartesian Chart using the [user-friendly documentation](https://help.syncfusion.com/winui/cartesian-charts/getting-started) and add the required axes using the [XAxes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html#Syncfusion_UI_Xaml_Charts_SfCartesianChart_XAxes) and [YAxes](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCartesianChart.html#Syncfusion_UI_Xaml_Charts_SfCartesianChart_YAxes) properties. We can add the [DateTimeAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html) to the XAxes and the [NumericalAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html) to the YAxes to visualize the energy utility consumption details over the last two decades. Refer to the following code example. ``` ``` ## Step 4: Initialize the DataContext for the chart Now, configure the **EnergyUtilityConsumption** class on the **US_Energy_Consumption** XAML page to bind its properties to the ** DataContext** of the chart. Refer to the following code example. ``` ``` ## Step 5: Initialize the chart header We can add the title to the chart using the [Header](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_Header) property to inform viewers what the data plotted in the **SfCartesianChart** is about. We can also customize the header’s font size, font weight, and text using the [FontSize](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock.fontsize?view=windows-app-sdk-1.4) , [FontWeight](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock.fontweight?view=windows-app-sdk-1.4) , and [Text](https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textblock.text?view=windows-app-sdk-1.4) properties, respectively. Refer to the following code example. ``` ``` ## Step 6: Initialize the WinUI stacked area series To visualize the energy utility consumption details, we’ll use the Syncfusion [StackedAreaSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.StackedAreaSeries.html) instance. Refer to the following code example. ``` ``` In the previous code example, we’ve bound each series’s **ItemSource** property to the observable collection of ** CollectionOfData**, and we’ve also bound the corresponding [XBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.XyDataSeries.html?tabs=tabid-1#Syncfusion_UI_Xaml_Charts_XyDataSeries_YBindingPath) properties. ## Step 7: Customize the chart axis elements We can customize the chart axis’s properties based on the chart’s visual appearance. For example, we can disable the major gridlines in the plot area and customize the style of the minor tick lines using the [ShowMajorGridLines](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ShowMajorGridLines) and [MinorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.RangeAxisBase.html#Syncfusion_UI_Xaml_Charts_RangeAxisBase_MinorTickStyle) properties, respectively. Moreover, we can show the energy utility consumption data for a specific period of the year by using the [ZoomFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ZoomFactor) property, which determines the percentage of the visible range from the total range of the axis, and the [ZoomPosition](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_ZoomPosition) property, which specifies the position of the visible range within the total axis range. We can also format the date-time value based on our requirements using the [LabelFormat](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelFormat) property by initializing the [LabelStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelStyle) property. Refer to the following code example. ``` ``` We can customize the axis label property using the [LabelTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property and set the axis interval using the [Interval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Interval) property. Refer to the following code example. ``` ``` ## Step 8: Customize the series appearance Let’s customize the color of each series using the [Fill](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Fill) property and label each series using the [Name](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.frameworkelement.name?view=winrt-22621) property. To display the energy consumption amount while hovering over a particular data point, we’ll use the [TooltipTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_TooltipTemplate) property and enable the [EnableTooltip](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_EnableTooltip) property. Refer to the following code example. ``` ``` ## Step 9: Configure the legend Next, let’s set up the legend, which includes a list of data points in the chart. Each item in the legend helps you identify its corresponding series in the chart. By doing this, we can determine the [Label](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Label) for each series that will appear in the legend. Refer to the following code example. ``` ``` ## Step 10: Configure the tooltip behavior Customize the [TooltipBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_TooltipBehavior) in the chart by initializing the [ChartTooltipBehavior](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartTooltipBehavior.html) class. Using the [Duration](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartTooltipBehavior.html#Syncfusion_UI_Xaml_Charts_ChartTooltipBehavior_Duration) property, we can set how long the tooltip value needs to be displayed while hovering the pointer over the series, and we can animate the tooltip value using the [EnableAnimation](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartTooltipBehavior.html#Syncfusion_UI_Xaml_Charts_ChartTooltipBehavior_EnableAnimation) property. Additionally, we can customize the appearance of the tooltip using the [Style](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartTooltipBehavior.html#Syncfusion_UI_Xaml_Charts_ChartTooltipBehavior_Style) property in the **ChartTooltipBehavior**. Refer to the following code example. ``` ``` ## Step 11: Configure the zoom and pan behavior Zooming and panning features help us visualize a huge set of data points with ease. We can navigate the chart area while zoomed in by enabling panning using the [EnablePanning](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html#Syncfusion_UI_Xaml_Charts_ChartZoomPanBehavior_EnablePanning) property. To prevent pinch and wheel-button zooming actions, we can disable them using the [EnablePinchZooming](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html#Syncfusion_UI_Xaml_Charts_ChartZoomPanBehavior_EnablePinchZooming) and [EnableMouseWheelZooming](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html#Syncfusion_UI_Xaml_Charts_ChartZoomPanBehavior_EnableMouseWheelZooming) properties, respectively. Refer to the following code example. ``` ``` After executing all the previous code examples, we’ll get the output shown in the following image. ![Visualizing US Energy Consumption Data Using Syncfusion WinUI Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Visualizing-US-Energy-Consumption-Data-Using-Syncfusion-WinUI-Stacked-Area-Chart.gif) Visualizing US Energy Consumption Data Using Syncfusion WinUI Stacked Area Chart ## GitHub reference For more details, refer to the [GitHub demo](https://github.com/SyncfusionExamples/Creating-a-Stacked-Area-Chart-for-U.S.-Primary-Energy-Consumption) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to visualize the primary energy utility consumption in the United States using the Syncfusion [WinUI Stacked Area Chart](https://www.syncfusion.com/winui-controls/cartesian-charts/winui-stacked-area-chart) . Try the steps in this blog post and leave your feedback in the comments section below! You can explore our [WinUI Charts examples](https://github.com/syncfusion/winui-demos) to learn more about the supported chart types and how easy it is to configure them for stunning visual effects. The latest version of the WinUI Charts control is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, try our [30-day free trial](https://www.syncfusion.com/downloads) to check it out. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [Introducing the New WinUI Shimmer Control](https://www.syncfusion.com/blogs/post/new-winui-shimmer-control.aspx) - [Unleashing the Power of Navigation and Filtering with WinUI Segmented Control](https://www.syncfusion.com/blogs/post/navigation-filtering-winui-segmented-control.aspx) - [Chart of the Week: Creating a WinUI Spline Area Chart for Top Google Investing Searches in 2022](https://www.syncfusion.com/blogs/post/winui-spline-area-chart-top-google-investing-search-2022.aspx) - [Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers](https://www.syncfusion.com/blogs/post/winui-100-stacked-column-chart-cloud-data-centers.aspx)