How to horizontally center align items label in line series

6 posts, 1 answers
  1. Andrea
    Andrea avatar
    16 posts
    Member since:
    May 2011

    Posted 09 Jun 2012 Link to this post

    Hi,



    is there a way to horizontally center align items label in a line series?

    I tried settings distance but I'm not able to align label at the center of pointmark.

    How can I do it?
  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 11 Jun 2012 Link to this post

    Hi Andrea,

    If I understand your question correctly, you are trying to center the PointMark directly beneath the ItemLabels. If i am wrong, provide me me with some more detail (your code would be extremely helpful) and I can help further.

    If this is what you are asking, then yes it is possible to style the template however you like. This documentation describes how you can style the ItemLabels directly. You can also learn how to style the PointMarks here.

    The part I think you should focus on is this:
     -PART_LabelsPanel - represents the container for the labels inside the plot area and is of type LabelsPanel.
    You can find it's definition here, inside the ChartAreaStyle. That link brings you to the documentation of the entire structure of the chart. It also shows you how to define your own custom style for your chart.

    From there you can create your own custom style, which contains the new ItemsLabel you're looking for. If you need additional help provide me with your code and I'll dig in deeper with you.

    Good Luck,
    Lancelot
  3. DevCraft banner
  4. Andrea
    Andrea avatar
    16 posts
    Member since:
    May 2011

    Posted 12 Jun 2012 Link to this post

    Hi,

    I was able to create a custom style for the chart but I don't know how to edit PART_DefaultChartAreaContainer in Blend in order to customize PART_LabelsPanel.
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 13 Jun 2012 Link to this post

    Hello Andrea,

    Unfortunately what you need is not a trivial task. What I can suggest is:
    1. Disable the labels' automatic positioning by setting SmartLabelsEnabled="False" to the ChartArea. Please note that in that way you will lose the logic for automatic positioning (which is critical for the first and the last label, because they will be clipped without it).
    2. Go through all labels and add negative left margin (or translate transform) to them which depends on the label's width + 5px (default offset):
    var labellist = RadChart1.DefaultView.ChartArea.ChildrenOfType<SeriesItemLabel>();
    foreach (var label in labellist )
    {
        double leftMargin = label.ActualWidth / 2 + 5;
        label.Margin = new Thickness(-leftMargin, -5, 0, 0);
    }
    I hope that this approach is appropriate for your scenario.

    Greetings,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Andrea
    Andrea avatar
    16 posts
    Member since:
    May 2011

    Posted 13 Jun 2012 Link to this post

    Hi,



    in which event I have to write the code you provided to align the labels?

    Bas Series have by default the label centered horizzontally. Can I apply the same style to Line Series?
  7. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 15 Jun 2012 Link to this post

    Hello Andrea,

    You can use for example the LayoutUpdated event. Please check the attached solution.

    Kind regards,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner