---
title: "Visualize U.S. Gulf Coast Kerosene-Type Jet Fuel Prices with .NET MAUI Fast Line Chart"
published_at: "2024-11-06T12:34:36+00:00"
modified_at: "2025-11-06T12:45:38+00:00"
url: "https://www.syncfusion.com/blogs/post/maui-fastlinechart-for-jet-fuel-price"
excerpt: "This blog explains how to visualize U.S. Gulf Coast jet fuel prices using Syncfusion .NET MAUI Fast Line Chart with code examples."
taxonomy_category:
  - ".NET MAUI"
  - "Chart"
  - "Chart of the week"
  - "Desktop"
  - "Development"
  - "Syncfusion"
taxonomy_post_tag:
  - ".NET MAUI"
  - "Charts"
  - "Data Visualization"
  - "desktop"
  - "MAUI"
  - "Mobile"
---

[Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week)
# Visualize U.S. Gulf Coast Kerosene-Type Jet Fuel Prices with .NET MAUI Fast Line Chart

[Arul Jenith Berkmans](https://www.syncfusion.com/blogs/author/arul-jenith-berkmans)

![Visualize U.S. Gulf Coast Kerosene-Type Jet Fuel Prices with .NET MAUI Fast Line Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Visualize-U.S.-Gulf-Coast-Kerosene-Type-Jet-Fuel-Prices-with-.NET-MAUI-Fast-Line-Chart.jpg)


**TL;DR:** Discover how to create an interactive data visualization with Syncfusion’s .NET MAUI Fast Line Chart and Range Selector to analyze U.S. Gulf Coast kerosene-type jet fuel prices from 1990 to 2024. This guide covers data binding, range selection, and how to apply plotbands for price range highlights. Users can explore historical price trends, zoom in on specific dates, and gain insights through a mini chart range selector.

Welcome to our **Chart of the Week** blog series!

Today, we’ll demonstrate how to use the [Syncfusion .NET MAUI Fast Line Chart](https://help.syncfusion.com/maui/cartesian-charts/fastline)
 and interactive [Range Selector](https://www.syncfusion.com/maui-controls/maui-range-selector)
 to visualize the weekly U.S. Gulf Coast kerosene-type jet fuel spot price from 1990 to 2024. We will also showcase how to highlight price ranges using [plotband support](https://help.syncfusion.com/maui/cartesian-charts/plotband)
 and use the [DateTime Range Selector](https://help.syncfusion.com/maui/datetime-range-selector/getting-started)
 with the chart to help users interactively select specific data ranges.

A [Fast Line Chart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.FastLineSeries.html)
 is a line chart optimized for efficiently handling large datasets. It is ideal for time-series data and allows users to easily track trends and changes over time, making it perfect for visualizing financial or technical data.

The following image shows the Fast Line Chart we’re going to create.![Visualizing U.S. Gulf Coast kerosene-type jet fuel prices with .NET MAUI FastLine Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/10/visualizing-weekly-U.S.-Gulf-Coast-kerosene-type-jet-fuel-spot-prices-from-1990-to-2024-1.png)

Let’s get started!

## Step 1: Gathering the data

Before building the .NET MAUI Fast Line Chart, we must collect the necessary data from the [U.S. Energy Information Administration](https://www.eia.gov/dnav/pet/hist/LeafHandler.ashx?n=PET&s=EER_EPJK_PF4_RGC_DPG&f=W)
. You can also download the data in CSV format from the website.

## Step 2: Preparing the data for the chart

Then, we need to organize the data properly. First, we define a **Model** class to structure our data. Then, we initialize the ** ViewModel** class that connects the data to the chart.

In our case, the **Model** class contains two properties: ** Date** and ** Price.**

```
public class Model
{
    public DateTime Date {  get; set; }

    public double Price {  get; set; }
}
```

Next, we define the **ViewModel** class. This class includes a ** WeeklyPriceData** property, which holds a collection of our data points. The ** ViewModel** also retrieves and processes the CSV data.

Refer to the following code example.

```
public class ViewModel
{
    public ObservableCollection<Model> WeeklyPriceData { get; set; }

    public ViewModel()
    {
        WeeklyPriceData = new ObservableCollection<Model>();
        ReadCSV();
    }
}
```

Finally, we implement the **ReadCSV** method, which retrieves the data from the CSV file (downloaded earlier), processes each entry, and converts it into the correct format. Once processed, the data is stored in the ** WeeklyPriceData** property, making it available for the chart to display.

Refer to the following code example.

```
public void ReadCSV()
{
    Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
    Stream? inputStream = executingAssembly.GetManifestResourceStream("USJetFuelPrice.Resources.Raw.data.csv");

    string? line;
    List<string> lines = new List<string>();

    if (inputStream != null)
    {
        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(',');

            var dateDetails = data[0].Split("/");
            var month = int.Parse(dateDetails[0]);
            var day = int.Parse(dateDetails[1]);
            var year = int.Parse(dateDetails[2]);

            var date = new DateTime(year, month, day);
            var price = Convert.ToDouble(data[1]);

            WeeklyPriceData.Add(new Model { Date = date, Price = price });
        }
    }
}
```

## Step 3: Configure the layout for the chart

In this demo, we’ll implement two controls: the [Syncfusion .NET MAUI Fast Line Chart](https://help.syncfusion.com/maui/cartesian-charts/fastline)
 and the [DateTime Range Selector](https://help.syncfusion.com/maui/datetime-range-selector/getting-started)
. Let’s define the layout to place these controls and enhance visual appeal and clarity.

Refer to the following code example.

```
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:USJetFuelPrice"
             x:Class="USJetFuelPrice.MainPage">

  //Border for the all controls.
  <Border Padding="20" 
         Margin="20" 
         StrokeThickness="2">

    <Grid RowDefinitions="190*,130"
        ColumnDefinitions="*"
        RowSpacing="15">                                         .        .        .         .               
        ...
    </Grid>
  </Border>

</ContentPage>
```

## Step 4: Configure the Syncfusion .NET MAUI Cartesian Charts

Then, configure the Syncfusion .NET MAUI [Cartesian Charts](https://www.syncfusion.com/maui-controls/maui-cartesian-charts)
control using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started)
.

```
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:USJetFuelPrice"
             xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             x:Class="USJetFuelPrice.MainPage">

 <charts:SfCartesianChart x:Name="Chart" Margin="8,0">

  <charts:SfCartesianChart.XAxes>
   <charts:DateTimeAxis />
  </charts:SfCartesianChart.XAxes>

  <charts:SfCartesianChart.YAxes>
   <charts:NumericalAxis />
  </charts:SfCartesianChart.YAxes>

  <charts:SfCartesianChart.Series>
   <charts:FastLineSeries />
  </charts:SfCartesianChart.Series>

 </charts:SfCartesianChart>

</ContentPage>
```

## Step 5: Binding data to .NET MAUI FastLine series

Next, bind the data to the Syncfusion .NET MAUI **FastLineSeries**. Before doing that, we need to set the ** ViewModel** as the ** BindingContext** for the ** ContentPage.** This will allow us to access the ** ViewModel** across the entire page. If we set it only for the ** SfCartesianChart,** we won’t be able to access the ** ViewModel** globally within the page.

Refer to the following code example.

```
<ContentPage.BindingContext>
 <local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>
  ....
<charts:SfCartesianChart x:Name="Chart" Margin="8,0">

 <charts:SfCartesianChart.Series>
  <charts:FastLineSeries ItemsSource="{Binding WeeklyPriceData}"
                         XBindingPath="Date"
                         YBindingPath="Price"
  </charts:FastLineSeries>
 </charts:SfCartesianChart.Series>

</charts:SfCartesianChart>
```

In this example, we’ve bound the **WeeklyPriceData** property from the ** ViewModel** to the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource)
 property of the [FastLineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.FastLineSeries.html)
. This binding ensures that whenever the data in the collection changes, the Fast Line Chart updates automatically to reflect the changes. We’ve also set the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath)
 to **Date** and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath)
 to **Price** properties. This helps the chart fetch values from the respective properties in the model.

## Step 6: Adding the plot band to the Fast Line Chart

[Plot bands](https://help.syncfusion.com/maui/cartesian-charts/plotband)
 are horizontal or vertical-colored bands that highlight specific regions on a chart. They’re commonly used in financial or scientific apps to mark interest ranges, such as normal ranges, risk zones, or thresholds.

Let’s add plot bands in the .NET MAUI Fast Line Chart. In our case, we’ll add the plot bands vertically along the X-axis.

Refer to the following code example.

```
<charts:SfCartesianChart.XAxes>
 <charts:DateTimeAxis >
  <charts:DateTimeAxis.PlotBands>
   <charts:DateTimePlotBandCollection>
    <charts:DateTimePlotBand 
     Start="1990-07-27" End="1990-12-21" 
     Fill="#60E4F1FF" />
                                
    <charts:DateTimePlotBand 
     Start="2005-07-22" End="2005-12-09" 
     Fill="#60E4F1FF" />

    <charts:DateTimePlotBand 
     Start="2008-03-01" End="2008-10-15" 
     Fill="#60E4F1FF" />

    <charts:DateTimePlotBand 
     Start="2019-12-27" End="2020-08-28" 
     Fill="#60E4F1FF" />

                                
    <charts:DateTimePlotBand 
     Start="2022-02-18" End="2023-05-12" 
     Fill="#60E4F1FF" />
                                
   </charts:DateTimePlotBandCollection>
  </charts:DateTimeAxis.PlotBands>

 </charts:DateTimeAxis>
</charts:SfCartesianChart.XAxes>
```

In this example, we’ve used the [DateTimePlotBand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimePlotBand.html)
 to highlight sudden peaks and a low range of price movement on the X-axis. If you’re working with a Numerical axis, you can use the [NumericalPlotBand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalPlotBand.html)
 instead. You need to set the [Start](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimePlotBand.html#Syncfusion_Maui_Charts_DateTimePlotBand_Start)
 and [End](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimePlotBand.html#Syncfusion_Maui_Charts_DateTimePlotBand_End)
 values for the plot band because these values indicate the highlighted range.

**Note:** For more details, refer to the [plot band documentation](https://help.syncfusion.com/maui/cartesian-charts/plotband)
 for additional options and usage scenarios.

## Step 7: Configure the .NET MAUI DateTime Range Selector with Chart

Let’s add the .NET MAUI DateTime Range Selector to make the chart more interactive. This will allow users to zoom in and select specific date ranges in the chart.

### Configure the Syncfusion .NET MAUI DateTime Range Selector

First, we configure the [DateTimeRangeSelector](https://help.syncfusion.com/maui/datetime-range-selector/getting-started)
 to our **ContentPage** because this is a separate control from the Syncfusion .NET MAUI suite.

```
<ContentPage xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             x:Class="USJetFuelPrice.MainPage">
 <sliders:SfDateTimeRangeSelector x:Name="Selector"
                                  Grid.Row="1"
                                  Minimum="1990-04-06"
                                  Maximum="2024-09-27"
                                  RangeStart="2000-05-01"
                                  RangeEnd="2021-09-01"
                                  Interval="5"
                                  IntervalType="Years"
                                  ShowTicks="True"
                                  ShowLabels="True"
                                  LabelsPlacement="BetweenTicks"
                                  DragBehavior="Both">

  </sliders:SfDateTimeRangeSelector>

</ContentPage>
```

In the **SfDateTimeRangeSelector,** we specify the data range by setting the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_Minimum)
, [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_Maximum)
, [RangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSliderBase-1.html#Syncfusion_Maui_Sliders_RangeSliderBase_1_RangeStart)
, and [RangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSliderBase-1.html#Syncfusion_Maui_Sliders_RangeSliderBase_1_RangeEnd)
 properties. These properties define the chart’s full range and currently selected range.

### Adding the SfCartesianChart inside the SfDateTimeRangeSelector

Let’s see how to add the chart inside the DateTimeRangeSelector. The chart’s height and width depend on the SfDateTimeRangeSelector’s width and height. We can directly add the **SfCartesianChart** inside the ** SfDateTimeRangeSelector** and customize it as needed.

Refer to the following code example.

```
<sliders:SfDateTimeRangeSelector x:Name="Selector">

 <charts:SfCartesianChart>
  <charts:SfCartesianChart.XAxes>
   <charts:DateTimeAxis Minimum="1990-04-06T05:30:00"
                        Maximum="2024-09-24T05:30:00">
   </charts:DateTimeAxis>
  </charts:SfCartesianChart.XAxes>

  <charts:SfCartesianChart.YAxes>
   <charts:NumericalAxis />
  </charts:SfCartesianChart.YAxes>

  <charts:SfCartesianChart.Series>
   <charts:FastLineSeries ItemsSource="{Binding WeeklyPriceData}"
                          XBindingPath="Date"
                          YBindingPath="Price"
   </charts:FastLineSeries>
  </charts:SfCartesianChart.Series>
 </charts:SfCartesianChart>
</sliders:SfDateTimeRangeSelector>
```

## Step 8: Connect the DateTime Range Selector to the chart

In our case, we use the **SfDateTimeRangeSelector** to easily select a specific date range. To achieve this, we bind the [RangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSliderBase-1.html#Syncfusion_Maui_Sliders_RangeSliderBase_1_RangeStart)
 and [RangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSliderBase-1.html#Syncfusion_Maui_Sliders_RangeSliderBase_1_RangeEnd)
 properties of the SfDateTimeRangeSelector to the **Minimum** and ** Maximum** values of the chart’s X-axis.

Refer to the following code example.

```
<charts:SfCartesianChart.XAxes>
 <charts:DateTimeAxis Minimum="{Binding RangeStart, Source={x:Reference Selector}}"
                      Maximum="{Binding RangeEnd, Source={x:Reference Selector}}" >
 </charts:DateTimeAxis>
</charts:SfCartesianChart.XAxes>
```

## Step 9: Customize the Fast Line Chart and DateTime Range Selector appearance

Let’s customize the appearance of the .NET MAUI Fast Line Chart and DateTime Range Selector to enhance its readability.

### Customizing the chart title

Refer to the following code example to customize the chart title.

```
<charts:SfCartesianChart.Title >
 <HorizontalStackLayout Margin="0,0,20,20">
  <Image Source="oildrum.png"
         Margin="5,0,5,0" 
         HeightRequest="{OnPlatform Android=16, WinUI=20, iOS= 16, MacCatalyst= 20}"  
         WidthRequest="{OnPlatform Android=16, WinUI=20, iOS= 16, MacCatalyst= 20}"/>  <Label Text="Weekly U.S. Gulf Coast Kerosene-Type Jet Fuel Spot Price (Dollars per Gallon)"
         TextColor="White"
         FontFamily="TimeSpan"
         FontAttributes="Bold"
         Margin="0,2,0,0" />
 </HorizontalStackLayout>

</charts:SfCartesianChart.Title>
```

### Customizing the FastLine series

Refer to the following code example to customize the FastLine series.

```
<charts:SfCartesianChart.Series>
 <charts:FastLineSeries  Fill="#E9D5CA"
                         ShowTrackballLabel="True"
                         StrokeWidth="2">
 </charts:FastLineSeries>
</charts:SfCartesianChart.Series>
```

### Customizing the chart axis

Refer to the following code example.

```
<charts:SfCartesianChart.XAxes>
 <charts:DateTimeAxis ShowMajorGridLines="False">
 </charts:DateTimeAxis>
</charts:SfCartesianChart.XAxes>

<charts:SfCartesianChart.YAxes>
 <charts:NumericalAxis EnableAutoIntervalOnZooming="True"
                       EdgeLabelsDrawingMode="Shift"
                       RangePadding="Round" Interval="1"
                       IsVisible="True">

  <charts:NumericalAxis.LabelStyle>
   <charts:ChartAxisLabelStyle LabelAlignment="Center" LabelFormat="0'$'" />
  </charts:NumericalAxis.LabelStyle>
 </charts:NumericalAxis>
</charts:SfCartesianChart.YAxes>
```

### Customizing the DateTime Range Selector

Refer to the following code example to customize the .NET MAUI DateTime Range Selector.

```
<sliders:SfDateTimeRangeSelector x:Name="Selector">

 <sliders:SfDateTimeRangeSelector.TrackStyle>
  <sliders:SliderTrackStyle ActiveFill="#9B7EBD"
                            InactiveFill="#D4BEE4" />
 </sliders:SfDateTimeRangeSelector.TrackStyle>

 <sliders:SfDateTimeRangeSelector.ThumbStyle>
  <sliders:SliderThumbStyle Fill="White"
                            StrokeThickness="2"
                            Stroke="#9B7EBD" />
 </sliders:SfDateTimeRangeSelector.ThumbStyle>

 <sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>
  <sliders:SliderThumbOverlayStyle Fill="#4DD4BEE4" />
 </sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>

 <sliders:SfDateTimeRangeSelector.LabelStyle>
  <sliders:SliderLabelStyle 
   InactiveFontSize="{OnPlatform 14, Android=10, iOS=10}"
   ActiveFontSize="{OnPlatform 14, Android=10, iOS=10}" />
 </sliders:SfDateTimeRangeSelector.LabelStyle>
</sliders:SfDateTimeRangeSelector>
```

### **Customizing the trackball labels**

To display the date and price on touch interactions, enable the **trackball labels** like in the following code example.

```
<charts:SfCartesianChart.TrackballBehavior>

 <charts:ChartTrackballBehavior DisplayMode="GroupAllPoints">

  <charts:ChartTrackballBehavior.LabelStyle>
   <charts:ChartLabelStyle TextColor="Black" Background="White" />
  </charts:ChartTrackballBehavior.LabelStyle>

  <charts:ChartTrackballBehavior.LineStyle>
   <charts:ChartLineStyle Stroke="White"/>
  </charts:ChartTrackballBehavior.LineStyle>

  <charts:ChartTrackballBehavior.MarkerSettings>
   <charts:ChartMarkerSettings Fill="White"/>
  </charts:ChartTrackballBehavior.MarkerSettings>

 </charts:ChartTrackballBehavior>
</charts:SfCartesianChart.TrackballBehavior>
```

After executing the previous code examples, we will get the output that resembles the following image.

![Visualizing U.S. Gulf Coast kerosene-type jet fuel prices using the .NET MAUI Fast Line Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Visualizing-U.S.-Gulf-Coast-kerosene-type-jet-fuel-prices-using-the-.NET-MAUI-FastLine-Chart.png)

Visualizing U.S. Gulf Coast kerosene-type jet fuel prices using the .NET MAUI Fast Line Chart

## GitHub reference

For more details, refer to [visualizing U.S. Gulf Coast kerosene-type jet fuel prices from 1990 to 2024 GitHub demo](https://github.com/SyncfusionExamples/Create-.NET-MAUI-FastLine-Chart-to-Visualize-U.S.-Gulf-Coast-Jet-Fuel-Prices-with-Plotband-Support.)
.


## Conclusion

Thanks for reading! In this blog, we’ve seen how to use the [Syncfusion .NET MAUI Fast Line Chart](https://help.syncfusion.com/maui/cartesian-charts/fastline)
 to visualize U.S. Gulf Coast kerosene-type jet fuel prices. We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

Existing customers can download the new version of Essential Studio® on the [License and Downloads](https://www.syncfusion.com/account)
 page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out our incredible features.

You can also 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



[Create a .NET MAUI Bubble Chart to Visualize Market Cap Distribution by Country – GDP and Company Analysis](https://www.syncfusion.com/blogs/post/maui-bubble-chart-market-cap-analysis)



[AI-Driven Smart Searching using .NET MAUI ComboBox](https://www.syncfusion.com/blogs/post/smart-ai-searching-net-maui-combobox)



[Introducing the New .NET MAUI AI AssistView Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-ai-assistview-control)



[AI-Powered Smart .NET MAUI Scheduler for Easy Appointment Booking](https://www.syncfusion.com/blogs/post/ai-powered-smart-maui-scheduler)