Skip to content

Commit 169353c

Browse files
MuneeshKumarGMuneeshKumarG
authored
Merge pull request #1 from SyncfusionExamples/WPF-46898-How-to-format-TimeSpanAxis-label-based-on-axis-interval-in-WPF(SfChart)
WPF-46898 How to format TimeSpanAxis label based on axis interval in WPF(SfChart)
2 parents 9e4d3af + 16fcbe9 commit 169353c

File tree

9 files changed

+300
-0
lines changed

9 files changed

+300
-0
lines changed

‎README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,105 @@
11
# How-to-format-TimeSpanAxis-label-based-on-axis-interval-in-WPF-SfChart
22
This sample demonstrate how to format TimeSpanAxis label based on axis interval in WPF (SfChart)
3+
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)
4+
5+
##[Xaml]
6+
````
7+
<chart:SfChart>
8+
<chart:SfChart.DataContext>
9+
<local:ViewModel/>
10+
</chart:SfChart.DataContext>
11+
<chart:SfChart.PrimaryAxis>
12+
13+
<chart:TimeSpanAxis Minimum="00:00:00"
14+
EdgeLabelsDrawingMode="Shift"
15+
Maximum="00:00:10"
16+
LabelFormat="mm\:ss\:fff">
17+
<chart:TimeSpanAxis.Header>
18+
<Label FontWeight="Bold"
19+
Content="Time in (mm:ss:fff)"/>
20+
</chart:TimeSpanAxis.Header>
21+
</chart:TimeSpanAxis>
22+
</chart:SfChart.PrimaryAxis>
23+
24+
<chart:SfChart.SecondaryAxis >
25+
<chart:NumericalAxis Minimum="50" Maximum="700" >
26+
<chart:NumericalAxis.Header>
27+
<Label Content="Distance in (meters)"
28+
FontWeight="Bold" />
29+
</chart:NumericalAxis.Header>
30+
</chart:NumericalAxis>
31+
</chart:SfChart.SecondaryAxis>
32+
33+
<chart:SfChart.Series>
34+
<chart:SplineSeries XBindingPath="Time"
35+
Interior="Purple"
36+
YBindingPath="Distance"
37+
ItemsSource="{Binding Data}" >
38+
<chart:SplineSeries.AdornmentsInfo>
39+
<chart:ChartAdornmentInfo ShowLabel="True" />
40+
</chart:SplineSeries.AdornmentsInfo>
41+
</chart:SplineSeries>
42+
</chart:SfChart.Series>
43+
</chart:SfChart>
44+
````
45+
46+
##[C#]
47+
````
48+
SfChart chart = new SfChart();
49+
this.DataContext = new ViewModel();
50+
51+
TimeSpanAxis primaryAxis = new TimeSpanAxis()
52+
{
53+
Minimum = new TimeSpan(00, 00, 00),
54+
Maximum = new TimeSpan(00, 00, 10),
55+
LabelFormat = "mm\\:ss\\:fff",
56+
Header = new Label()
57+
{
58+
Content = "Time in (mm:ss:fff)",
59+
FontWeight = FontWeights.Bold,
60+
},
61+
EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift,
62+
63+
};
64+
chart.PrimaryAxis = primaryAxis;
65+
66+
NumericalAxis secondaryAxis = new NumericalAxis()
67+
{
68+
Minimum = 50,
69+
Maximum = 700,
70+
Header = new Label()
71+
{
72+
Content = "Distance in (meters)",
73+
FontWeight = FontWeights.Bold,
74+
},
75+
76+
};
77+
chart.SecondaryAxis = secondaryAxis;
78+
79+
SplineSeries series = new SplineSeries()
80+
{
81+
XBindingPath = "Time",
82+
YBindingPath = "Distance",
83+
ItemsSource = (new ViewModel()).Data,
84+
AdornmentsInfo = new ChartAdornmentInfo()
85+
{
86+
ShowLabel = true,
87+
},
88+
Interior = new SolidColorBrush(Colors.Purple),
89+
90+
};
91+
chart.Series.Add(series);
92+
this.Content = chart;
93+
````
94+
##Output
95+
96+
![Output](https://user-images.githubusercontent.com/105482474/211509266-b28301df-9f64-4c2b-8f79-e9cf258b2723.png)
97+
98+
##See Also
99+
100+
[Axis labels for TimeSpanAxis in WPF (SfChart)](https://help.syncfusion.com/wpf/charts/axis#axis-labels)
101+
102+
[How to display the axis labels in a particular format](https://www.syncfusion.com/kb/3318/how-to-display-the-axis-labels-in-a-particular-format-of-wpf-chart-sfchart)
103+
104+
[How to customize label formats of data-time axis during the interval transitions](https://www.syncfusion.com/kb/6940/how-to-customize-the-label-formats-of-date-time-axis-during-interval-transitions-in-wpf)
105+

‎TimeSpanAxis/TimeSpanAxis.sln

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.3.32901.215
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TimeSpanAxis", "TimeSpanAxis\TimeSpanAxis.csproj", "{E7722455-EFD0-40E9-8E61-EA4C18121BD7}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{E7722455-EFD0-40E9-8E61-EA4C18121BD7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{E7722455-EFD0-40E9-8E61-EA4C18121BD7}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{E7722455-EFD0-40E9-8E61-EA4C18121BD7}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{E7722455-EFD0-40E9-8E61-EA4C18121BD7}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {EBFF1E07-D8F9-4921-92BC-C9E352BDAC11}
24+
EndGlobalSection
25+
EndGlobal

‎TimeSpanAxis/TimeSpanAxis/App.xaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="TimeSpanAxis_Sample.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:TimeSpanAxis_Sample"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎TimeSpanAxis/TimeSpanAxis/App.xaml.cs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Configuration;
4+
using System.Data;
5+
using System.Linq;
6+
using System.Threading.Tasks;
7+
using System.Windows;
8+
9+
namespace TimeSpanAxis_Sample
10+
{
11+
/// <summary>
12+
/// Interaction logic for App.xaml
13+
/// </summary>
14+
public partial class App : Application
15+
{
16+
}
17+
}

‎TimeSpanAxis/TimeSpanAxis/AssemblyInfo.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎TimeSpanAxis/TimeSpanAxis/MainWindow.xaml

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<Window x:Class="TimeSpanAxis_Sample.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:TimeSpanAxis_Sample"
7+
xmlns:chart="http://schemas.syncfusion.com/wpf"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
<Grid>
11+
<chart:SfChart>
12+
<chart:SfChart.DataContext>
13+
<local:ViewModel/>
14+
</chart:SfChart.DataContext>
15+
<chart:SfChart.PrimaryAxis>
16+
17+
<chart:TimeSpanAxis Minimum="00:00:00"
18+
EdgeLabelsDrawingMode="Shift"
19+
Maximum="00:00:10"
20+
LabelFormat="mm\:ss\:fff">
21+
<chart:TimeSpanAxis.Header>
22+
<Label FontWeight="Bold"
23+
Content="Time in (mm:ss:fff)"/>
24+
</chart:TimeSpanAxis.Header>
25+
</chart:TimeSpanAxis>
26+
</chart:SfChart.PrimaryAxis>
27+
28+
<chart:SfChart.SecondaryAxis >
29+
<chart:NumericalAxis Minimum="50" Maximum="700" >
30+
<chart:NumericalAxis.Header>
31+
<Label Content="Distance in (meters)"
32+
FontWeight="Bold" />
33+
</chart:NumericalAxis.Header>
34+
</chart:NumericalAxis>
35+
</chart:SfChart.SecondaryAxis>
36+
37+
<chart:SfChart.Series>
38+
<chart:SplineSeries XBindingPath="Time"
39+
Interior="Purple"
40+
YBindingPath="Distance"
41+
ItemsSource="{Binding Data}" >
42+
<chart:SplineSeries.AdornmentsInfo>
43+
<chart:ChartAdornmentInfo ShowLabel="True" />
44+
</chart:SplineSeries.AdornmentsInfo>
45+
</chart:SplineSeries>
46+
</chart:SfChart.Series>
47+
</chart:SfChart>
48+
</Grid>
49+
</Window>

‎TimeSpanAxis/TimeSpanAxis/MainWindow.xaml.cs

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
using System;
2+
using Syncfusion.UI.Xaml.Charts;
3+
using System.Collections.Generic;
4+
using System.Globalization;
5+
using System.Linq;
6+
using System.Text;
7+
using System.Threading.Tasks;
8+
using System.Windows;
9+
using System.Windows.Controls;
10+
using System.Windows.Data;
11+
using System.Windows.Documents;
12+
using System.Windows.Input;
13+
using System.Windows.Media;
14+
using System.Windows.Media.Imaging;
15+
using System.Windows.Navigation;
16+
using System.Windows.Shapes;
17+
18+
namespace TimeSpanAxis_Sample
19+
{
20+
/// <summary>
21+
/// Interaction logic for MainWindow.xaml
22+
/// </summary>
23+
public partial class MainWindow : Window
24+
{
25+
public MainWindow()
26+
{
27+
InitializeComponent();
28+
}
29+
}
30+
31+
public class Model
32+
{
33+
public int Distance { get; set; }
34+
public TimeSpan Time { get; set; }
35+
36+
}
37+
38+
public class ViewModel
39+
{
40+
public List<Model> Data { get; set; }
41+
42+
public ViewModel()
43+
{
44+
Data = new List<Model>()
45+
{
46+
new Model(){Distance = 100,Time = new TimeSpan(0,0,0,1,68),},
47+
new Model(){Distance = 300,Time = new TimeSpan( 0,0,0,2,105),},
48+
new Model(){Distance = 500,Time = new TimeSpan(0,0,0,3,200),},
49+
new Model(){Distance = 380,Time = new TimeSpan(0,0,0,4,254)},
50+
new Model(){Distance = 435,Time = new TimeSpan(0,0,0,5,68),},
51+
new Model(){Distance = 250,Time = new TimeSpan( 0,0,0,6,105),},
52+
new Model(){Distance = 470,Time = new TimeSpan(0,0,0,7,200),},
53+
new Model(){Distance = 620,Time = new TimeSpan(0,0,0,8,254)},
54+
new Model(){Distance = 470,Time = new TimeSpan(0,0,0,9,200),},
55+
new Model(){Distance = 580,Time = new TimeSpan(0,0,0,9,404)}
56+
};
57+
}
58+
}
59+
}

‎TimeSpanAxis/TimeSpanAxis/TimeSpanAxis.csproj

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net6.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<UseWPF>true</UseWPF>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
12+
</ItemGroup>
13+
14+
</Project>

‎TimeSpanAxis/TimeSpanAxis/TimeSpanAxis.csproj.user

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup />
4+
<ItemGroup>
5+
<ApplicationDefinition Update="App.xaml">
6+
<SubType>Designer</SubType>
7+
</ApplicationDefinition>
8+
</ItemGroup>
9+
<ItemGroup>
10+
<Page Update="MainWindow.xaml">
11+
<SubType>Designer</SubType>
12+
</Page>
13+
</ItemGroup>
14+
</Project>

0 commit comments

Comments
 (0)