Chart-Labels in WPF Chart (Classic)

28 May 202110 minutes to read

Chart Font Settings

Font settings of each and every part of Chart such as Chart, ChartArea, ChartLegend and ChartAreaLegend can be customized with the following given properties.

• FontFamily
• FontSize
• FontStretch
• FontStyle
• FontWeight
• Foreground

NOTE

Font settings set to the Chart will be applied to all the units of chart. However, properties set separately for those units such as ChartArea, ChartAxis, ChartLegend will override, these settings.

Chart Axis Label

ChartAxis Labels can be customized by using the following given properties.

ChartAxis Property	Description
LabelBackground	gets or sets the Background of the ChartAxis Label
LabelForeground	gets or sets the Foreground of the ChartAxis Label
LabelBorderBrush	gets or sets the Border brush of the ChartAxis Label
LabelBorderThickness	gets or sets the Border thickness of the ChartAxis Label
LabelCornerRadius	gets or sets the Corner Radius of the ChartAxis Label
LabelFontFamily	gets or sets the FontFamily of the ChartAxis Label
LabelFontSize	gets or sets the FontSize of the ChartAxis Label
LabelFontWeight	gets or sets the FontWeight of the ChartAxis Label
LabelFormat	gets or sets the Format of the ChartAxis Label such as 0.00 or 0 precent
LabelDateTimeFormat	gets or sets the DateTime Format of the ChartAxis LabelApplicable when Axis.ValueType is DateTime

The following code example could be used to customize the Chart Axis Labels.

XAML

<sfchart:ChartArea.PrimaryAxis>

<sfchart:ChartAxis  LabelForeground="Blue" LabelBackground="Orange" LabelBorderBrush="Black" LabelBorderThickness="1" LabelCornerRadius="2" LabelFontFamily="Calibri" LabelFontSize="10" LabelFontWeight="Bold" LabelFormat="0%"/>

</sfchart:ChartArea.PrimaryAxis>

C#

//Sets the Label settings of PrimaryAxis

 Area.PrimaryAxis.LabelForeground = Brushes.Blue;

 Area.PrimaryAxis.LabelBackground = Brushes.Orange;

 Area.PrimaryAxis.LabelBorderBrush = Brushes.Black;

 Area.PrimaryAxis.LabelBorderThickness = new Thickness(1);

 Area.PrimaryAxis.LabelCornerRadius = new CornerRadius(2);

 Area.PrimaryAxis.LabelFontFamily = new FontFamily("Calibri");

 Area.PrimaryAxis.LabelFontSize = 10;            

 Area.PrimaryAxis.LabelFontWeight = FontWeights.Bold;

 Area.PrimaryAxis.LabelFormat = "0%";

Following given figure illustrates Chart with customized Primary Axis labels.

Customizing Label Text

Apart from the default Labels displayed, you can also add Custom Labels to be displayed in the Chart. This section discusses the following topics.

Properties Used to Customize Label Text

The following properties are used to determine the data source for the text of the Labels.

ChartAxis Property	Description
LabelsMode	Auto : content is determined automatically Custom : custom values are used for labels content representation DataSource : external datasource is used for labels content Default : content for labels is either determined automatically, taken from external dataSource or being set with custom values None : labels values are taken from point's X-coordinate
LabelsSource	gets or sets the Labels Source
PositionPath	gets or sets the position path
ContentPath	gets or sets the content path

By assigning the LabelsMode property to ChartAxis.CustomLabels, you can add Custom Labels to the ChartAxis.

XAML

<syncfusion:Chart Name="Chart1" >

          <syncfusion:ChartArea Name="area" >

                    <syncfusion:ChartArea.PrimaryAxis>

                        <syncfusion:ChartAxis LabelsMode="Custom" RangeCalculationMode="AdjustAcrossChartTypes">

                            <syncfusion:ChartAxis.CustomLabels>

                                <syncfusion:ChartAxisLabel Content="III place" Position="0" />

                                <syncfusion:ChartAxisLabel Content="I place" Position="1" />

                                <syncfusion:ChartAxisLabel Content="II place" Position="4" />

                            </syncfusion:ChartAxis.CustomLabels>

                        </syncfusion:ChartAxis>

                    </syncfusion:ChartArea.PrimaryAxis>                  

          </syncfusion:ChartArea>

</syncfusion:Chart>

C#

// Indicates that the axis labels need to be taken from a custom source.

area.PrimaryAxis.LabelsMode = ChartAxisLabelsMode.Custom;



ChartAxisLabel customLabel1 = new ChartAxisLabel();

customLabel1.Content = "III place";

customLabel1.Position = 0;



ChartAxisLabel customLabel2 = new ChartAxisLabel();

customLabel2.Content = "I place";

customLabel2.Position = 1;



ChartAxisLabel customLabel3 = new ChartAxisLabel();

customLabel3.Content = "II place";

customLabel3.Position = 4;



// Adding custom label to labels collection.

area.PrimaryAxis.CustomLabels.Add(customLabel1);

area.PrimaryAxis.CustomLabels.Add(customLabel2);

area.PrimaryAxis.CustomLabels.Add(customLabel3);           

The following screenshot illustrates Chart PrimaryAxis with Custom Labels.

Labels from Data Source

The following code example illustrates how Custom Labels can be used in the ChartAxis.

C#

// Indicates that the axis labels need to be taken from a data source.

area.PrimaryAxis.LabelsMode = ChartAxisLabelsMode.DataSource;   



// Creates DataSource with desired labels.

List<object> labels = new List<object>();

for (double i = 1; i < 6; i++)

{

labels.Add(new { Position = i, Content = "Label " + i.ToString() });

}



// Associates DataSource with the Chart Labels.

area.PrimaryAxis.LabelsSource = labels;       

// Set the position path where the labels should be placed.

area.PrimaryAxis.PositionPath = "Position";

// Set the content path from which labels are to be taken.

area.PrimaryAxis.ContentPath = "Content";

The following screenshot illustrates Chart PrimaryAxis with Labels from Data Source.

Chart Axis Label Rotate

ChartAxis labels could be rotated with custom angles. Axis.LabelRotateAngle property is used to define the angle in which the Axis Labels need to be rotated.

The following code example could be used to customize the labels to be rotated with 90’.

XAML

<sfchart:ChartArea.PrimaryAxis>

<sfchart:ChartAxis LabelRotateAngle="90" LabelFormat="0.000000" />

</sfchart:ChartArea.PrimaryAxis>

C#

//Sets the Label to be rotated with 90' angle

 Area.PrimaryAxis.LabelRotateAngle = 90;

The following figure illustrates Chart with Primary Axis labels rotated with 90’ angle

NOTE

LabelRotateAngle property will not have effect when the Axis.IntersectAction property is set as Rotate.

Intersecting Labels

Sometimes the chart dimensions could cause the labels to intersect. The chart will, by default, render those texts one over the other. But, it also has some built-in capabilities to work around this overlap and lets you dictate the technique to follow. Refer to the properties as follows.

ChartAxis Property	Description
IntersectAction	Hide – labels are hidden to avoid intersection MultipleRows – labels are wrapped into multiple rows to avoid intersection None – no special actionLabels may intersect Rotate – labels are rotated to avoid intersection Wrap – labels are wrapped to avoid intersection
HidePartialLabel	True – hides the labels that appear partiallyUsually the labels in the edges will be affected. False - labels are drawn as suchNo action will be taken.
EdgeLabelsDrawingMode	Center – draws the edge labels at the center of the GridLines Shift – value indicating that edge label should be shifted to either left or right so that it comes within the Chart Area

C#

Chart1.Areas[0].PrimaryAxis.IntersectAction = ChartLabelIntersectAction.MultipleRows;

Chart1.Areas[0].PrimaryAxis.HidePartialLabel = true;

Chart1.Areas[0].PrimaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift;

XAML

<syncfusion:ChartArea.PrimaryAxis>

<syncfusion:ChartAxis Header="Product Name"  IntersectAction="MultipleRows" HidePartialLabel="True" EdgeLabelsDrawingMode="Shift"  />

</syncfusion:ChartArea.PrimaryAxis>

The following screenshot illustrates various techniques for avoiding the Label intersection.

Legend Panel Customization

Essential Chart enables you to arrange the legend items in any panel. You can arrange them in common panels like Grid, StackPanel, Canvas and WrapPanel. You can also create custom panel and arrange them.

Property

Property	Description	Type	Data Type	Reference links
LegendItemsPanel	Sets a template panel for arranging legend items.	Dependency Property	ItemsPanelTemplate	ItemsPanelTemplate Class

Customizing legend Panel

You can customize the legend panel using the LegendItemsPanel property of ChartLegend. Following code illustrates this:

XAML

<syncfusion:ChartLegend IconVisibility="Visible" BorderThickness="0" LegendPanel="Custom">                                    <syncfusion:ChartLegend.LegendItemsPanel>                                        <ItemsPanelTemplate>                                            <StackPanel Orientation="Vertical"/>                                        </ItemsPanelTemplate>                                    </syncfusion:ChartLegend.LegendItemsPanel>                                </syncfusion:ChartLegend>

Sample Link

To view sample:

1. Open the Syncfusion Dashboard.
2. Select User Interface.
3. Click the WPF drop-down list and select Explore Samples.
4. Navigate to WPF\Chart.WPF\Samples\3.5\WindowsSamples\Chart Customization\Custom Legend Items Panel Demo\