Interactively changing axis font sizes

2 posts, 0 answers
  1. Joe
    Joe avatar
    11 posts
    Member since:
    May 2014

    Posted 30 Oct 2014 Link to this post

    Is there any way to force a refresh/rebuild of the chart so that the labels are correctly positioned after a runtime change of the font size?  Ideally, in a MVVM way?

    Currently, if you bind the font size to a property in the ViewModel and change it, the chart is not repositioned properly to accommodate the change in size.  See attached pics showing undesirable results of changing the font size, both when increasing or decreasing from the initial size.

    Here's some code:

                    <chartView:LinearAxis FontFamily="Segoe UI"
                            FontSize="{Binding AxisFontSize}"
                            Title="{Binding AxisTitle}"
                            Maximum="{Binding AxisMaxValue}"
                            LabelFormat="{Binding AxisLabelFormat}">

    public double AxisFontSize
            return this._axisFontSize;
            if ( this._axisFontSize != value )
                this._axisFontSize = value;
                this.OnPropertyChanged( "AxisFontSize" );
                this.OnPropertyChanged( "AxisLabelFormat" );

    What is the best way to accomplish a dynamic font size change?
  2. Peshito
    Peshito avatar
    524 posts

    Posted 03 Nov 2014 Link to this post


    Axis refreshing is not possible at that time. A workaround for the overlapping that we are aware of, is to set fixed width for your LabelTemplate. This will ensure that the labels will have enough space.
    Copy Code
    <DataTemplate x:Key="myLabelTemplate">
        <TextBlock Width="200" TextWrapping="Wrap" HorizontalAlignment="Right" Text="...." >

    You should also reset the label template for instance when changing the font size in order for the workaround to apply:
    this.verticalAxis.LabelTemplate = null;
    this.verticalAxis.LabelTemplate = this.Resources["myLabelTemplate"] as DataTemplate;
    Hope that helps.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top