How to styles for legend items?

[Paul]

Hello,

I tried to create a scatter plot chart just like attachment 1. Then I tried to show checkbox to show/ hide it's series points.

In this case, the long labels have been overlap and I tried to style for legend items to make the labels is next to the checkbox but I cannot find the solution.

So what should I do to do like that?

Regard,

Paul

[Dess | Tech Support Engineer, Principal]

Hello Paul, 

Thank you for writing.  

It seems that you have attached a screenshot of RadListView, not RadChartView. The following help article demonstrates a sample approach how to create custom legend items, insert the necessary inner elements and customize the design according to your requirement: http://docs.telerik.com/devtools/winforms/chartview/features/legend

If you are still experiencing any further difficulties it would be greatly appreciated if you can provide a sample screenshot illustrating the goal that you are trying to achieve. Thus, we would be able to assist you further. Thank you.

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress

[Paul]

Hello Dess,

Sorry, I attached the wrong capture image.

Yes, when I created the scatter plot chart, I already read custom article as your the one suggested. Then the result as in my attachment.

What should I do style it?

Regard,

Paul

[Paul]

Hello Dess,

Here are my code to create custom legend items:

public class ScatterPlotLegendItemElement : LegendItemElement
{
    public ScatterPlotLegendItemElement(LegendItem item) : base(item)
    {
        Children.Remove(MarkerElement);
        TitleElement.DrawFill = true;
        //TitleElement.DrawBorder = true;
        StretchHorizontally = true;
        Font = ComponentSettings.DefaultFont;
        TextAlignment = ContentAlignment.MiddleLeft;
    }

    private readonly RadCheckBoxElement _cb = new RadCheckBoxElement();

    protected override void Synchronize()
    {
        base.Synchronize();
        SyncVisualStyleProperties(LegendItem.Element, TitleElement);
        TitleElement.ForeColor = ComponentSettings.WhiteColor;
        TitleElement.Font = ComponentSettings.DefaultFont;
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        MarkerElement.Visibility = ElementVisibility.Collapsed;

        _cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.On;

        Children.Insert(0, _cb);

        _cb.ToggleStateChanged += cb_ToggleStateChanged;
    }

    private void cb_ToggleStateChanged(object sender, StateChangedEventArgs args)
    {
        LegendItem.Element.IsVisible = args.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On;
    }
}

Then call it in the VisualItemCreating event

private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
{
    e.ItemElement = new ScatterPlotLegendItemElement(e.LegendItem);
}

 

Regard,
Paul

[Dess | Tech Support Engineer, Principal]

Hello Paul, 

Thank you for writing back. 

The LegendItemElement.TitleElement is stretched horizontally by default. That is why you obtained the illustrated result. In order to left align the text part and display the whole text, you should set the LegendItemElement.TitleElement.StretchHorizontally property to false:

public class ScatterPlotLegendItemElement : LegendItemElement
{
    Font defaultFont = new Font("Arial", 10f, FontStyle.Regular);

    public ScatterPlotLegendItemElement(LegendItem item) : base(item)
    {
        Children.Remove(MarkerElement);
        TitleElement.DrawFill = true;
        TitleElement.StretchHorizontally = false;
        Font = defaultFont;
        TextAlignment = ContentAlignment.MiddleLeft;
    }

    private readonly RadCheckBoxElement _cb = new RadCheckBoxElement();

    protected override void Synchronize()
    {
        base.Synchronize();
        SyncVisualStyleProperties(LegendItem.Element, TitleElement);
        TitleElement.ForeColor = Color.Lime;
        TitleElement.Font = defaultFont;
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        MarkerElement.Visibility = ElementVisibility.Collapsed;
        _cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.On;
        Children.Insert(0, _cb);
        _cb.ToggleStateChanged += cb_ToggleStateChanged;
    }

    private void cb_ToggleStateChanged(object sender, StateChangedEventArgs args)
    {
        LegendItem.Element.IsVisible = args.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On;
    }
}

I hope this information helps. If you have any additional questions, please let me know. 

 Regards,
Dess
Telerik by Progress

[Paul]

Hello Dess,

Thanks you for your help, it working well for me

Regard,

Phuong Tran