StepLineChart.xaml

<Page
    x:Class="Syncfusion.ChartDemos.WinUI.Views.StepLineChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:common="using:Syncfusion.DemosCommon.WinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Syncfusion.ChartDemos.WinUI"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="Transparent"
    mc:Ignorable="d">

    <Grid>
        <Grid.Resources>
            <Style TargetType="Line" x:Name="axisStyle">
                <Setter Property="StrokeThickness" Value="0"/>
                <Setter Property="Stroke" Value="Transparent"/>
            </Style>
        </Grid.Resources>
        <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto">
            <common:DemoLayout HeaderText="This step line chart showcases the percentage of electricity production from oil, gas, and coal sources between Canada and France from 2000 to 2010.">
                <common:DemoLayout.DataContext>
                    <local:StepLineChartViewModel />
                </common:DemoLayout.DataContext>
                <common:DemoLayout.Example>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <chart:SfCartesianChart x:Name="Chart" Header="Electricity-Production" Height="420"
                                       PaletteBrushes="{ThemeResource ChartPalette}">

                        <chart:SfCartesianChart.Legend>
                                <chart:ChartLegend Padding="0,0,40,0"/>
                        </chart:SfCartesianChart.Legend>

                        <chart:SfCartesianChart.XAxes>
                                <chart:CategoryAxis ShowMajorGridLines="False" Interval="2"/>
                            </chart:SfCartesianChart.XAxes>

                        <chart:SfCartesianChart.YAxes>
                                <chart:NumericalAxis Minimum="0" Maximum="35" AxisLineStyle="{StaticResource axisStyle}" MajorTickStyle="{StaticResource axisStyle}">
                                    <chart:NumericalAxis.LabelStyle>
                                        <chart:LabelStyle LabelFormat="0'%" FontSize="13"/>
                                    </chart:NumericalAxis.LabelStyle>
                                </chart:NumericalAxis>
                            </chart:SfCartesianChart.YAxes>

                            <chart:StepLineSeries  EnableAnimation="True" ItemsSource="{Binding CanadaData}" Label="Canada" EnableTooltip="True"
                        XBindingPath="Name" YBindingPath="Value" LegendIcon="Circle" />

                            <chart:StepLineSeries EnableAnimation="True" ItemsSource="{Binding FranceData}" Label="France" EnableTooltip="True" 
                        XBindingPath="Name" YBindingPath="Value" LegendIcon="Circle" />
                    </chart:SfCartesianChart>
                        
                        <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="0,10,0,0">
                            <TextBlock Text="Source: "/>
                            <TextBlock TextWrapping="WrapWholeWords" Margin="3,0,0,0">
                         <Hyperlink NavigateUri="https://data.worldbank.org/indicator/EG.ELC.FOSL.ZS?end=2010&amp;locations=CA-FR&amp;start=2000" FontStyle="Italic" UnderlineStyle="None">The World Bank Group</Hyperlink>
                            </TextBlock>
                        </StackPanel>

                    </Grid>
                </common:DemoLayout.Example>
                <common:DemoLayout.Xaml>
<x:String xml:space="preserve">
&lt;chart:SfCartesianChart x:Name=&quot;Chart&quot; Header=&quot;Electricity-Production&quot;
                       PaletteBrushes=&quot;{ThemeResource ChartPalette}&quot;&gt;

  &lt;chart:SfCartesianChart.XAxes&gt;
        &lt;chart:CategoryAxis ShowMajorGridLines=&quot;False&quot; Interval=&quot;2&quot;/&gt;
    &lt;/chart:SfCartesianChart.XAxes&gt;

 &lt;chart:SfCartesianChart.YAxes&gt;
        &lt;chart:NumericalAxis Minimum=&quot;0&quot; AxisLineStyle=&quot;{StaticResource axisStyle}&quot; 
                MajorTickStyle=&quot;{StaticResource axisStyle}&quot; Maximum=&quot;35&quot;&gt;
            &lt;chart:NumericalAxis.LabelStyle&gt;
                &lt;chart:LabelStyle LabelFormat=&quot;0'%&quot; FontSize=&quot;13&quot;/&gt;
           &lt;/chart:NumericalAxis.LabelStyle&gt;
        &lt;chart:NumericalAxis/&gt;  
    &lt;/chart:SfCartesianChart.YAxes&gt;
    
    &lt;chart:SfCartesianChart.Legend&gt;
        &lt;chart:ChartLegend/&gt;
    &lt;/chart:SfCartesianChart.Legend&gt;
    
    &lt;chart:StepLineSeries ItemsSource=&quot;{Binding CanadaData}&quot; XBindingPath=&quot;Name&quot; YBindingPath=&quot;Value&quot;
                          EnableAnimation=&quot;True&quot; Label=&quot;Canada&quot; EnableTooltip=&quot;True&quot;
                          LegendIcon=&quot;Circle&quot;/&gt;
                        
    &lt;chart:StepLineSeries ItemsSource=&quot;{Binding FranceData}&quot; XBindingPath=&quot;Name&quot; YBindingPath=&quot;Value&quot;
                          Label=&quot;France&quot; EnableTooltip=&quot;True&quot; EnableAnimation=&quot;True&quot;
                          LegendIcon=&quot;Circle&quot;/&gt;
    
&lt;/chart:SfCartesianChart&gt;
</x:String>
                </common:DemoLayout.Xaml>
            </common:DemoLayout>
        </ScrollViewer>
    </Grid>
</Page>