Axis header template - layout not updated

[Ondrej Svoboda]

Hi,

I have the following axis setup:

<chart:CategoryAxis Header="My header text" >

<chart:CategoryAxis.HeaderTemplate>

<DataTemplate>

<TextBlock Text="{Binding}" FontSize="{Binding Path=Value, ElementName=slider}" />

</DataTemplate>

</chart:CategoryAxis.HeaderTemplate>

</chart:CategoryAxis>

Where FontSize is bound to a slider. My problem is when slider value is changed chart layout is not updated and header text is floating out of the chart control area and is not centered anymore. When window is resized, layout is updated and all looks good then.

I think this is a bug, could you please fix this?

Thanks

[Hemalatha Marikumar]

Hi Ondrej Svoboda, 

  

Greetings from Syncfusion. 

  

We have validated your query and we would like to let you know that currently we don’t have alignment support for ChartAxis Header. By default, the Axis Header aligned from center of corresponding width. So only it’s not aligned properly when dynamically change the FontSize. 

  

You can resolve this by setting the TextAlignment as Center and binding axis ActualWidth value to the TextBlock Width property. And also, manually positioned the axis Header by override the SfChart to position the same when maximizing and minimizing the window as per in the below code snippet. 

                                                

Code Snippet [Xaml]: 

<local:SfChartExt x:Name="chart" > 

  

<syncfusion:CategoryAxis Header="My header text" > 

                    <syncfusion:CategoryAxis.HeaderTemplate> 

                        <DataTemplate> 

                                <TextBlock Text="{Binding}" Width="{Binding ElementName=primaryAxis, Path=ActualWidth}" TextAlignment="Center"  FontSize="{Binding Path=Value, ElementName=slider}" /> 

                        </DataTemplate> 

                    </syncfusion:CategoryAxis.HeaderTemplate> 

  

</local:SfChartExt> 

  

  

Code Snippet [C#]: 

  

public class SfChartExt : SfChart 

    { 

        protected override Size ArrangeOverride(Size arrangeBounds) 

        { 

            var size = base.ArrangeOverride(arrangeBounds); 

  

            // Positioning the Primary Axis. 

            ContentControl xAxisHeader = PrimaryAxis.GetType().GetField("headerContent", 

            System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(PrimaryAxis) as ContentControl; 

            Canvas.SetLeft(xAxisHeader, 0); 

  

            // Positioning the Secondary Axis. 

            ContentControl yAxisHeader = SecondaryAxis.GetType().GetField("headerContent", 

            System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(SecondaryAxis) as ContentControl; 

            Canvas.SetLeft(yAxisHeader, -(SecondaryAxis.DesiredSize.Height - yAxisHeader.DesiredSize.Height) / 2); 

  

            return size; 

        } 

    } 

  

 

And we have prepared a sample based on your requirement and download the sample from the below link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/150618/ze/1506181989738535.zip 

  

Please let us know if need any further assistance on this. 

  

Regards, 

Hemalatha M.