LineSeries Color setting combined with labels

8 posts, 1 answers
  1. Holger
    Holger avatar
    39 posts
    Member since:
    Jan 2015

    Posted 17 May 2018 Link to this post

         To set the Color of a Line in a Lineseries, we are supposed to set

     lineSeries.BorderColor = Color.Black;

    But if I have Labels Enabled

    (lineSeries.ShowLabels = true)

    the labels get a Border, just by setting the Color of the LineSeries itself.

    Screenshot attached.

    I just want a single line black on white Chart.

     

     

     

  2. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 17 May 2018 Link to this post

    Hi Holger,

    Yes, this is expected when the BorderColor of the labels is not explicitly set. You can set the labels BorderColor in the LabelFormatting event handler:
    private void RadChartView1_LabelFormatting(object sender, ChartViewLabelFormattingEventArgs e)
    {
        e.LabelElement.BorderColor = Color.Transparent;
    }

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Holger
    Holger avatar
    39 posts
    Member since:
    Jan 2015

    Posted 17 May 2018 in reply to Dimitar Link to this post

    Yes it works, thank you.

    This inheritance might be useful for something like a Font, for the LineColor this inheritance is never wanted. I consider this a workaround.

    However, a related Question, when I draw the line on top of something else, I have a RangeSeries here,

    the color seems to be modified or combined, or there might be some transparency added, or it's the AntiAliasing maybe.

    How come my black line appears gray, when drawn on another background ?

  4. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 18 May 2018 Link to this post

    Hello Holger,

    Thank you for the feedback we will consider improving this if possible. 

    The series painting depend on their adding order. In this case, you should add the line series after the range and the line will be painted over the area. You may need to change the color of the range series after that as well. For example:
    rangeSeries.BackColor = Color.Gray;
    rangeSeries.BorderColor = Color.DarkGray;

    I hope this will be useful.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Holger
    Holger avatar
    39 posts
    Member since:
    Jan 2015

    Posted 18 May 2018 in reply to Dimitar Link to this post

    Well, in reverse order, the line is invisible/completly hidden, this is conclusive.

    But the Color of the Line ist set to black, and then drawn on this gray 'background' the line is not black anymore.

    You can compare the axis-Line is in correct black, the Lineseries is not.

    If this is not done by purpose, maybe Telerik added some automatic transparency features, if ChartSeries cover each other,

    than it must be some AntiAliasing effect.

    By having a look into the source-code, I found out the Lineseries is drawn as a Series of Rectangles, 

    that's why we have to set the BorderColor, and maybe DrawRectangle has some different Antialiasing-Behaviour than DrawLine.

    However, this is not so important, more a curiosity.

  6. Answer
    Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 18 May 2018 Link to this post

    Hi Holger,

    The line is visible in both cases on my side. I have attached my test project. Could you please check it and let me know how it differs from your real setup? 

    I have attached a couple of screenshots that show the result on my side as well. Please note that a transparent color is used for the area by default. If you are using a custom one you could set its transparency. This is demonstrated in the sample project. You can test by adding the line series first. 

    I am looking forward to your reply.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Holger
    Holger avatar
    39 posts
    Member since:
    Jan 2015

    Posted 18 May 2018 Link to this post

    You really put a lot of effort in this, thank you.

    Well, I found out, the series use reverse order, they are painted from Last to First.

    A programmer always paints the background first, and everything else on top.

    But when adding series to the chart, I have to Add the "background" series Last.
    That's against my intuition.
    And also against yours, since you wrote:
    "you should add the line series after the range and the line will be painted over the area"
    That's wrong. Your screenshots are the proof.

    Second thing:
    I hadn't set the color of the RangeSeries,
    As you confirmed just now, and what I explicitly asked for, is "the default colors are transparent".

    (this is not so simple to find out, since the Default Colors are applied later, at no point in your code, you can set a breakpoint and just inspect Series.BackColor, it's always Color.Transparent)

    So what I had, was my black line, behind a (coincidently) grey area.

     

    With all Colors being transparent by default,

    the order of Adding things to the SeriesCollection, has actually only little influence to the result. You always see everything.

    So the counter-intuitive Adding Order is just pointing out, when handling colors manually.

    We finally clearified this, maybe you find a good place to document this.

     

     

     

     

     

     


  8. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 21 May 2018 Link to this post

    Hi Holger,

    Yes, you are correct and the series are indeed painted in reverse order. I am glad that you have found a solution for your case. We will add this to the documentation when possible. 

    Do not hesitate to contact us if you have other questions.
     
    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top