Prevent data point label from overlapping line on chart

2 posts, 0 answers
  1. Raga
    Raga avatar
    4 posts
    Member since:
    Jan 2016

    Posted 18 Jul Link to this post

    I am using a CustomLabelRenderer for my line chart because I don't want the speech-bubble border that the default labels have. I draw the data point label a fixed distance either above or below the data point depending on the y position of the data point. The problem is, depending on the shape of the line chart, the labels sometimes overlap with the line chart's line, as shown in the attached image. I would like the labels to not overlap the line. Is there something in the API that can calculate the optimal placement of my labels that avoids overlapping my line?
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 19 Jul Link to this post

    Hi Raga,

    Thanks for writing and for the provided screenshot.

    With a custom label renderer you will have to calculate this behavior by yourself. For example, you could make the following estimation:

    1. If the neighbouring data points of the current data point have a bigger Y axis value of the current data point - draw the label below the data point.

    2. If the neighbouring data points of the current data point have a smaller Y axis value of the current data point - draw the label above the data point.

    3. If the left/right data point's value is bigger/smaller draw the current data point's label floating to the right/left of the data point itself.


    I hope this is helpful.

    Regards,
    Deyan
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
Back to Top