Chart-Labels in WPF Chart (Classic)

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.

<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>
//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.

<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>
// 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’.

    <sfchart:ChartArea.PrimaryAxis>
    
    <sfchart:ChartAxis LabelRotateAngle="90" LabelFormat="0.000000" />
    
    </sfchart:ChartArea.PrimaryAxis>
    //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
    Chart1.Areas[0].PrimaryAxis.IntersectAction = ChartLabelIntersectAction.MultipleRows;
    
    Chart1.Areas[0].PrimaryAxis.HidePartialLabel = true;
    
    Chart1.Areas[0].PrimaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift;
    <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>

    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\