How to switch between different SparkChart types in the .NET MAUI Toolkit?

This article explains the different SparkChart types available in the Syncfusion .NET MAUI Spark Chart’s - Line, Column, Area, and WinLoss - and demonstrates how to switch between these visualizations at runtime. The sample uses a Picker control to choose the required Spark Chart’s{target=“_blank”} and displays only the selected chart while sharing a common data source.

Let’s walk through the step-by-step process to achieve this behavior.

Step 1: Create the data model and ViewModel
Create a simple model SparkDataModel and a ViewModel SparkChartViewModel that contains:

• The data collection
• Available SparkChart types
• SelectedType property to decide which chart is visible

public class SparkDataModel
   {
       public double Value { get; set; }
   }

   public class SparkChartViewModel : INotifyPropertyChanged
   {
       public ObservableCollection<SparkDataModel> Data { get; set; }

       public ObservableCollection<string> Types { get; } = new ObservableCollection<string>
       {
           "Line",
           "Column",
           "Area",
           "WinLoss"
       };

       private string selectedType;
       public string SelectedType
       {
           get => selectedType;
           set
           {
               if (selectedType == value) return;
               selectedType = value;
               OnPropertyChanged(nameof(SelectedType));
           }
       }

       public SparkChartViewModel()
       {
           Data = new ObservableCollection<SparkDataModel>
           {
               new SparkDataModel(){ Value = 5000},
                ....
           };

           SelectedType = "Line";
       }

       public event PropertyChangedEventHandler? PropertyChanged;
       protected void OnPropertyChanged(string name) =>
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
   } 

Step 2: Create the UI and bind the Picker to the Spark charts

• Add the four Spark charts to a Grid.
• Bind the IsVisible property to the selected type using a converter to ensure that only the corresponding chart is shown.

 <Grid>
     <HorizontalStackLayout Grid.Row="0" Spacing="8" Padding="8" HorizontalOptions="Center">
         <Button Text="Line" Clicked="LineButton_Clicked" />
         <Button Text="Column" Clicked="ColumnButton_Clicked" />
         <Button Text="Area" Clicked="AreaButton_Clicked" />
         <Button Text="WinLoss" Clicked="WinLossButton_Clicked" />
     </HorizontalStackLayout>

     <Grid Grid.Row="1">
         <sparkchart:SfSparkLineChart x:Name="sparkLineChart"
                          ItemsSource="{Binding Data}"
                          YBindingPath="Value"
                          ShowMarkers="True"
                          IsVisible="{Binding SelectedType, Converter={StaticResource EqualsConverter}, ConverterParameter=Line}"/>

         <sparkchart:SfSparkColumnChart x:Name="sparkColumnChart"
                          ItemsSource="{Binding Data}"
                          YBindingPath="Value"           
                          IsVisible="{Binding SelectedType, Converter={StaticResource EqualsConverter}, ConverterParameter=Column}"/>

         <sparkchart:SfSparkAreaChart x:Name="sparkAreaChart"
                          ItemsSource="{Binding Data}"
                          YBindingPath="Value"
                          ShowMarkers="True"
                          IsVisible="{Binding SelectedType, Converter={StaticResource EqualsConverter}, ConverterParameter=Area}"/>

         <sparkchart:SfSparkWinLossChart x:Name="sparkWinLossChart"
                          ItemsSource="{Binding Data}"
                          YBindingPath="Value"
                          IsVisible="{Binding SelectedType, Converter={StaticResource EqualsConverter}, ConverterParameter=WinLoss}"/>
     </Grid>
 </Grid>
  

Output:

View the Github Sample here.

Conclusion

I hope you found this guide helpful in learning how to switch between Sparkline types (Line, Column, Area, and WinLoss) in the .NET MAUI Toolkit using Syncfusion Spark Charts.

You can refer to our .NET MAUI Spark Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our.NET MAUI Toolkit Spark Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!