We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Axis header template - layout not updated

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

1 Reply

HM Hemalatha Marikumar Syncfusion Team January 14, 2020 08:55 AM UTC

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. 
  
  
Please let us know if need any further assistance on this. 
  
Regards, 
Hemalatha M. 


Loader.
Live Chat Icon For mobile
Up arrow icon