How to styles for legend items?

6 posts, 1 answers
  1. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 03 May 2017 Link to this post

    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

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3903 posts

    Posted 05 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 07 May 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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

  4. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 07 May 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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

  5. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3903 posts

    Posted 10 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Paul
    Paul avatar
    34 posts
    Member since:
    Apr 2017

    Posted 10 May 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello Dess,

    Thanks you for your help, it working well for me

    Regard,

    Phuong Tran

Back to Top