Skip to content

This sample demonstrate how to format TimeSpanAxis label based on axis interval in WPF (SfChart)

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-format-TimeSpanAxis-label-based-on-axis-interval-in-WPF-SfChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

How-to-format-TimeSpanAxis-label-based-on-axis-interval-in-WPF-SfChart

This sample demonstrate how to format TimeSpanAxis label based on axis interval in WPF (SfChart) WPF SfChart provides support for formatting axis labels based on axis intervals in TimeSpanAxis. The LabelFormat Property can be used to apply predefined formatting types based on usages. This article explains how to format TimeSpanAxis label based on axis interval in WPF (SfChart)

##[Xaml]

<chart:SfChart>
            <chart:SfChart.DataContext>
                <local:ViewModel/>
            </chart:SfChart.DataContext>
            <chart:SfChart.PrimaryAxis>

                <chart:TimeSpanAxis Minimum="00:00:00" 
                                    EdgeLabelsDrawingMode="Shift" 
                                    Maximum="00:00:10" 
                                    LabelFormat="mm\:ss\:fff">
                    <chart:TimeSpanAxis.Header>
                        <Label FontWeight="Bold"  
                               Content="Time in (mm:ss:fff)"/>
                    </chart:TimeSpanAxis.Header>
                </chart:TimeSpanAxis>
            </chart:SfChart.PrimaryAxis>

            <chart:SfChart.SecondaryAxis  >
                <chart:NumericalAxis Minimum="50" Maximum="700" >
                    <chart:NumericalAxis.Header>
                        <Label Content="Distance in (meters)" 
                               FontWeight="Bold" />
                    </chart:NumericalAxis.Header>
                </chart:NumericalAxis>
            </chart:SfChart.SecondaryAxis>
            
            <chart:SfChart.Series>
                <chart:SplineSeries XBindingPath="Time" 
                                    Interior="Purple" 
                                    YBindingPath="Distance" 
                                    ItemsSource="{Binding Data}" >
                    <chart:SplineSeries.AdornmentsInfo>
                        <chart:ChartAdornmentInfo ShowLabel="True" />
                    </chart:SplineSeries.AdornmentsInfo>
                </chart:SplineSeries>
            </chart:SfChart.Series>
        </chart:SfChart>

##[C#]

  SfChart chart = new SfChart();
            this.DataContext = new ViewModel();

            TimeSpanAxis primaryAxis = new TimeSpanAxis()
            {
                Minimum = new TimeSpan(00, 00, 00),
                Maximum = new TimeSpan(00, 00, 10),
                LabelFormat = "mm\\:ss\\:fff",
                Header = new Label()
                {
                    Content = "Time in (mm:ss:fff)",
                    FontWeight = FontWeights.Bold,
                },
                EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift,

            };
            chart.PrimaryAxis = primaryAxis;

            NumericalAxis secondaryAxis = new NumericalAxis()
            {
                Minimum = 50,
                Maximum = 700,
                Header = new Label()
                {
                    Content = "Distance in (meters)",
                    FontWeight = FontWeights.Bold,
                },

            };
            chart.SecondaryAxis = secondaryAxis;

            SplineSeries series = new SplineSeries()
            {
                XBindingPath = "Time",
                YBindingPath = "Distance",
                ItemsSource = (new ViewModel()).Data,
                AdornmentsInfo = new ChartAdornmentInfo()
                {
                    ShowLabel = true,
                },
                Interior = new SolidColorBrush(Colors.Purple),
                
            };
            chart.Series.Add(series);
            this.Content = chart;

##Output

Output

##See Also

Axis labels for TimeSpanAxis in WPF (SfChart)

How to display the axis labels in a particular format

How to customize label formats of data-time axis during the interval transitions

About

This sample demonstrate how to format TimeSpanAxis label based on axis interval in WPF (SfChart)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages