Skip to content

Commit f7865fb

Browse files
MuneeshKumarGMuneeshKumarG
authored
Merge pull request #1 from SyncfusionExamples/WPF-46194_Demo
WPF-46194 Add WPF chart axis labels customization sample
2 parents 9a5170c + a45c430 commit f7865fb

16 files changed

+659
-1
lines changed

‎README.md‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,94 @@
11
# How-to-customize-the-appearance-of-axis-labels-in-WPF-Chart
2-
This sample demonstrate the axis labels customization in the WPF Chart.
2+
This sample demonstrate how to customize the appearance of axis labels in WPF Chart.
3+
4+
[WPF SfChart](https://help.syncfusion.com/wpf/charts/getting-started) supports customizing the appearance of the axis labels using the [LabelTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelTemplate) property of the Chart axis with the following steps:
5+
6+
Step 1: Initialize a data model that represents a data point for the Chart.
7+
8+
**[C#]**
9+
10+
```
11+
public class ChartModel
12+
{
13+
public string XValue { get; set; }
14+
public double YValue { get; set; }
15+
}
16+
17+
```
18+
19+
Step 2: Create a `ViewModel` class with a data collection property to render chart.
20+
21+
**[ViewModel]**
22+
23+
```
24+
public class ViewModel
25+
{
26+
public ObservableCollection<ChartModel> Data { get; set; }
27+
28+
public ViewModel()
29+
{
30+
Data = new ObservableCollection<ChartModel>()
31+
{
32+
new ChartModel(){XValue = "Jewelry", YValue = 2000},
33+
new ChartModel(){XValue = "Electronics", YValue = 1500},
34+
new ChartModel(){XValue = "Research", YValue = 1300},
35+
new ChartModel(){XValue = "Investment", YValue = 1700 },
36+
new ChartModel(){XValue = "Purchases", YValue = 1000},
37+
};
38+
}
39+
}
40+
41+
```
42+
Step 3: Customize the axis labels using `LabelTemplate` property of the Chart axis.
43+
44+
**[XAML]**
45+
46+
```
47+
<chart:SfChart>
48+
49+
<chart:SfChart.PrimaryAxis>
50+
<chart:CategoryAxis ShowGridLines="False">
51+
<chart:CategoryAxis.LabelTemplate>
52+
<DataTemplate>
53+
<Border Padding="3" Background="LightGreen" CornerRadius="4" >
54+
<TextBlock Text="{Binding LabelContent}"
55+
FontWeight="Bold" Foreground="Black"/>
56+
</Border>
57+
</DataTemplate>
58+
</chart:CategoryAxis.LabelTemplate>
59+
</chart:CategoryAxis>
60+
</chart:SfChart.PrimaryAxis>
61+
62+
<chart:SfChart.SecondaryAxis>
63+
<chart:NumericalAxis Maximum="2500">
64+
<chart:NumericalAxis.LabelTemplate>
65+
<DataTemplate>
66+
<Border Padding="3" Background="LightGreen" CornerRadius="4" >
67+
<TextBlock Text="{Binding LabelContent}"
68+
FontWeight="Bold" Foreground="Black"/>
69+
</Border>
70+
</DataTemplate>
71+
</chart:NumericalAxis.LabelTemplate>
72+
</chart:NumericalAxis>
73+
</chart:SfChart.SecondaryAxis>
74+
75+
<chart:ColumnSeries ItemsSource="{Binding Data}"
76+
XBindingPath="XValue"
77+
YBindingPath="YValue"
78+
Palette="Metro">
79+
<chart:ColumnSeries.AdornmentsInfo>
80+
<chart:ChartAdornmentInfo ShowLabel="True" />
81+
</chart:ColumnSeries.AdornmentsInfo>
82+
</chart:ColumnSeries>
83+
</chart:SfChart>
84+
85+
```
86+
87+
## Output:
88+
89+
![Binding CSV data to the WPF Charts](https://user-images.githubusercontent.com/61832185/209123493-97c5a17e-db8a-47cd-a652-1aefe36faf87.png)
90+
91+
## <a name="troubleshooting"></a>Troubleshooting ##
92+
### Path too long exception
93+
If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
94+

‎WPF_SfChart_Customize_AxisLabels/App.config‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<configuration>
3+
<startup>
4+
<supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
5+
</startup>
6+
</configuration>

‎WPF_SfChart_Customize_AxisLabels/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="WPF_SfChart_Customize_AxisLabels.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:WPF_SfChart_Customize_AxisLabels"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎WPF_SfChart_Customize_AxisLabels/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 WPF_SfChart_Customize_AxisLabels
10+
{
11+
/// <summary>
12+
/// Interaction logic for App.xaml
13+
/// </summary>
14+
public partial class App : Application
15+
{
16+
}
17+
}

‎WPF_SfChart_Customize_AxisLabels/ChartModel.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace WPF_SfChart_Customize_AxisLabels
8+
{
9+
public class ChartModel
10+
{
11+
public string XValue { get; set; }
12+
public double YValue { get; set; }
13+
}
14+
}

‎WPF_SfChart_Customize_AxisLabels/MainWindow.xaml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<Window x:Class="WPF_SfChart_Customize_AxisLabels.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:WPF_SfChart_Customize_AxisLabels"
7+
xmlns:chart="http://schemas.syncfusion.com/wpf"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
<Grid>
11+
<Grid.DataContext>
12+
<local:ViewModel />
13+
</Grid.DataContext>
14+
15+
<chart:SfChart>
16+
17+
<chart:SfChart.PrimaryAxis>
18+
<chart:CategoryAxis ShowGridLines="False">
19+
<chart:CategoryAxis.LabelTemplate>
20+
<DataTemplate>
21+
<Border Padding="3" Background="LightGreen" CornerRadius="4" >
22+
<TextBlock Text="{Binding LabelContent}"
23+
FontWeight="Bold" Foreground="Black"/>
24+
</Border>
25+
</DataTemplate>
26+
</chart:CategoryAxis.LabelTemplate>
27+
</chart:CategoryAxis>
28+
</chart:SfChart.PrimaryAxis>
29+
30+
<chart:SfChart.SecondaryAxis>
31+
<chart:NumericalAxis Maximum="2500">
32+
<chart:NumericalAxis.LabelTemplate>
33+
<DataTemplate>
34+
<Border Padding="3" Background="LightGreen" CornerRadius="4" >
35+
<TextBlock Text="{Binding LabelContent}"
36+
FontWeight="Bold" Foreground="Black"/>
37+
</Border>
38+
</DataTemplate>
39+
</chart:NumericalAxis.LabelTemplate>
40+
</chart:NumericalAxis>
41+
</chart:SfChart.SecondaryAxis>
42+
43+
<chart:ColumnSeries ItemsSource="{Binding Data}"
44+
XBindingPath="XValue"
45+
YBindingPath="YValue"
46+
Palette="Metro">
47+
<chart:ColumnSeries.AdornmentsInfo>
48+
<chart:ChartAdornmentInfo ShowLabel="True" />
49+
</chart:ColumnSeries.AdornmentsInfo>
50+
</chart:ColumnSeries>
51+
</chart:SfChart>
52+
</Grid>
53+
54+
</Window>

‎WPF_SfChart_Customize_AxisLabels/MainWindow.xaml.cs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
16+
namespace WPF_SfChart_Customize_AxisLabels
17+
{
18+
/// <summary>
19+
/// Interaction logic for MainWindow.xaml
20+
/// </summary>
21+
public partial class MainWindow : Window
22+
{
23+
public MainWindow()
24+
{
25+
InitializeComponent();
26+
}
27+
}
28+
}

‎WPF_SfChart_Customize_AxisLabels/Properties/AssemblyInfo.cs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
using System.Reflection;
2+
using System.Resources;
3+
using System.Runtime.CompilerServices;
4+
using System.Runtime.InteropServices;
5+
using System.Windows;
6+
7+
// General Information about an assembly is controlled through the following
8+
// set of attributes. Change these attribute values to modify the information
9+
// associated with an assembly.
10+
[assembly: AssemblyTitle("WPF_SfChart_Customize_AxisLabels")]
11+
[assembly: AssemblyDescription("")]
12+
[assembly: AssemblyConfiguration("")]
13+
[assembly: AssemblyCompany("")]
14+
[assembly: AssemblyProduct("WPF_SfChart_Customize_AxisLabels")]
15+
[assembly: AssemblyCopyright("Copyright © 2022")]
16+
[assembly: AssemblyTrademark("")]
17+
[assembly: AssemblyCulture("")]
18+
19+
// Setting ComVisible to false makes the types in this assembly not visible
20+
// to COM components. If you need to access a type in this assembly from
21+
// COM, set the ComVisible attribute to true on that type.
22+
[assembly: ComVisible(false)]
23+
24+
//In order to begin building localizable applications, set
25+
//<UICulture>CultureYouAreCodingWith</UICulture> in your .csproj file
26+
//inside a <PropertyGroup>. For example, if you are using US english
27+
//in your source files, set the <UICulture> to en-US. Then uncomment
28+
//the NeutralResourceLanguage attribute below. Update the "en-US" in
29+
//the line below to match the UICulture setting in the project file.
30+
31+
//[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
32+
33+
34+
[assembly: ThemeInfo(
35+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
36+
//(used if a resource is not found in the page,
37+
// or application resource dictionaries)
38+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
39+
//(used if a resource is not found in the page,
40+
// app, or any theme specific resource dictionaries)
41+
)]
42+
43+
44+
// Version information for an assembly consists of the following four values:
45+
//
46+
// Major Version
47+
// Minor Version
48+
// Build Number
49+
// Revision
50+
//
51+
// You can specify all the values or you can default the Build and Revision Numbers
52+
// by using the '*' as shown below:
53+
// [assembly: AssemblyVersion("1.0.*")]
54+
[assembly: AssemblyVersion("1.0.0.0")]
55+
[assembly: AssemblyFileVersion("1.0.0.0")]

‎WPF_SfChart_Customize_AxisLabels/Properties/Resources.Designer.cs‎

Lines changed: 71 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)