How to format pie chart labels ?

[Xyroid]

Hi, I am following this pie chart example. I want to set labels like the categories should be in BOLD text but the percentage should be in normal text. How can I achieve this ?

[Ivaylo Gergov]

Hello Farhan,

Thank you for your interest.

Indeed you can achieve the desired effect with custom label strategy. First you need to override the ChartSeriesLabelStrategy.Options flag like this:

public override LabelStrategyOptions Options
{
    get
    {
        return LabelStrategyOptions.DefaultVisual;
    }
}

Then in the CreateDefaultVisual(...) method override you need to have two textblocks in order to set different styles( for example in a StackPanel):

public override FrameworkElement CreateDefaultVisual(DataPoint point, int labelIndex)
{
    ChartSeries series = point.Presenter as ChartSeries;
    StackPanel stackpanel = new StackPanel();
    stackpanel.Children.Add(new TextBlock {FontSize = 16, FontWeight = FontWeights.Bold });
    stackpanel.Children.Add(new TextBlock ());
    return stackpanel;
}

Then, you need to override the SetLabelContent(...) method in order to set the content of each textblock:

public override void SetLabelContent(DataPoint point, FrameworkElement visual, int labelIndex)
{
    ((visual as StackPanel).Children[0] as TextBlock).Text = (point.DataItem as BudgetData).Department.ToString();
    ((visual as StackPanel).Children[1] as TextBlock).Text = point.Label.ToString();
}

I hope this helps. Let me know if I can assist you further.

 

Kind regards,
Ivaylo Gergov
the Telerik team

[Xyroid]

Thanks Ivaylo for your reply. I need one more help. If I don't use stackpanel and I have single textblock and then I want to do inline formatting then how can I achieve that ?

public override FrameworkElement CreateDefaultVisual(DataPoint point, int labelIndex)
{
   ChartSeries series = point.Presenter as ChartSeries;
    var textBlock = new TextBlock()
   {
        Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb(255, 69, 74, 80)),
        FontSize = 14.667
    };
    return textBlock;
}

public override object GetLabelContent(DataPoint point, int labelIndex)
{
    if (point == null || labelIndex < 0)
    {
        return base.GetLabelContent(point, labelIndex);
    }

    return string.Format(MyFormat, ((PieDataPoint)point).Value, ((PieDataPoint)point).Percent / 100);
}

[Giuseppe]

Hello Farhan,

Due to the specifics of the control implementation you cannot use single TextBlock as a default visual in a custom label strategy (TextBlock is the default visual used by the control itself) so if you want to use single TextBlock, you will need to wrap it in a Border element like this (also, note that you need to override SetLabelContent and not GetLabelContent method for your scenario):

public class CustomStrategy : ChartSeriesLabelStrategy
{
    public override LabelStrategyOptions Options
    {
        get
        {
            return LabelStrategyOptions.DefaultVisual;
        }
    }

    public override Windows.UI.Xaml.FrameworkElement CreateDefaultVisual(Telerik.Charting.DataPoint point, int labelIndex)
    {
        var textBlock = new TextBlock()
        {
            Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb(255, 69, 74, 80)),
            FontSize = 14.667
        };

        Border wrapper = new Border();
        wrapper.Child = textBlock;

        return wrapper;
    }

    public override void SetLabelContent(Telerik.Charting.DataPoint point, Windows.UI.Xaml.FrameworkElement visual, int labelIndex)
    {
        TextBlock textblock = (visual as Border).Child as TextBlock;

        Run run1 = new Run();
        run1.FontWeight = FontWeights.Bold;
        run1.Text = (point.DataItem as BudgetData).Department.ToString();

        Run run2 = new Run();
        run2.Text = point.Label.ToString();

        textblock.Inlines.Add(run1);
        textblock.Inlines.Add(run2);
    }
}

Hope this helps.


All the best,
Giuseppe
the Telerik team