ScatterLineSeries - not respecting BorderWidth or BorderDashStyle

7 posts, 0 answers
  1. Sergio
    Sergio avatar
    4 posts
    Member since:
    Mar 2014

    Posted 13 Jun 2017 Link to this post

    Hello.  I'm trying to style a series spline to have a thin borderwidth to set it apart from the other splines on the chartview, but no matter what value I set the BorderWidth property to, the spline is the same thickness.  Intellisense for BorderWidth mentions that BorderBoxStyle.FourBorders must be used, and the series is normally in SingleBorder, but setting it to FourBorders also didn't help.  I also tried to set the BorderDashStyle to dashes, just to see if other property changes would be respected, but the line is still solid.  The BorderColor and Spline properties appear to be respected.  Any ideas what I'm doing wrong?

    Here's the code to create and add the series, as well as a screenshot of the chart.  The series in question is to the top (high) red spline.

    Thanks!

     

        ScatterLineSeries x3PriceEnvelopeHighSeries = new ScatterLineSeries();
                            x3PriceEnvelopeHighSeries.XValueMember = "FaceWeight";
                            x3PriceEnvelopeHighSeries.YValueMember = "x3Price";
                            x3PriceEnvelopeHighSeries.DataSource = curvePointsHigh;
                            x3PriceEnvelopeHighSeries.BorderColor = Color.Red;
                            x3PriceEnvelopeHighSeries.BackColor = Color.Red;
                            x3PriceEnvelopeHighSeries.ShowLabels = false;
                            x3PriceEnvelopeHighSeries.Spline = true;
                            //x3PriceEnvelopeHighSeries.BorderBoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
                            x3PriceEnvelopeHighSeries.BorderWidth = (float)0.25;
                            //x3PriceEnvelopeHighSeries.BorderLeftWidth = (float)0.25;
                            //x3PriceEnvelopeHighSeries.BorderTopWidth = (float)0.0;
                            //x3PriceEnvelopeHighSeries.BorderRightWidth = (float)0.0;
                            //x3PriceEnvelopeHighSeries.BorderBottomWidth = (float)0.0;
                            x3PriceEnvelopeHighSeries.BorderDashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
                            chart.Series.Add(x3PriceEnvelopeHighSeries);
                            x3PriceEnvelopeHighSeries.IsVisibleInLegend = false;

  2. Sergio
    Sergio avatar
    4 posts
    Member since:
    Mar 2014

    Posted 13 Jun 2017 in reply to Sergio Link to this post

    To clarify, I can't get the BorderWidth to be thin (e.g. 0.25 relative to 1.0), but setting BorderWidth to 100 does produce a very thick line.
  3. Hristo
    Admin
    Hristo avatar
    1519 posts

    Posted 14 Jun 2017 Link to this post

    Hi Sergio,

    Thank you for writing.

    The line elements are painted using the Graphics.DrawPath method receiving a Pen object as an argument. The pen object receives a width object in its constructor and Microsoft have basically stated that minimum width of the drawing would be 1https://msdn.microsoft.com/en-us/library/k0yzhw2d.aspx#Anchor_1.

    In this case, there is not much we can do because of the Pen limitation. If it fits your local setup you can also set a semi-transparent back color to those lines you would like to be with a width less than 1.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    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.
  4. Sergio
    Sergio avatar
    4 posts
    Member since:
    Mar 2014

    Posted 14 Jun 2017 in reply to Hristo Link to this post

    Thanks for your reply, Hristo.  I understand your explanation, but if the minimum thickness is 1, and 1 renders to the thick lines shown in my attached image, how did Telerik generate the WinForms chartview with much thinner lines on their website, shown in the image attached to this reply?

    Thanks!

  5. Hristo
    Admin
    Hristo avatar
    1519 posts

    Posted 15 Jun 2017 Link to this post

    Hello Sergio,

    Thank you for writing.

    The charts in the displayed images have a default border width of 2. I am following the example as demonstrated here: http://docs.telerik.com/devtools/winforms/chartview/series-types/scatterline.

    I am also sending you a short video toggling the border widths between 1 and 2.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    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. Sergio
    Sergio avatar
    4 posts
    Member since:
    Mar 2014

    Posted 15 Jun 2017 in reply to Hristo Link to this post

    Figured it out!  The line was so thick because what I was seeing was not the line, it was the datapoints.  The scatterlineseries had over 600 datapoints, and they were all tightly packed together, so all those squares formed the thick line.  I trimmed the series datasource down to about 75 data points and the line got thin. :-)  I also used a small PointSize, and now I have a smooth, thin curve/spline.

    Thank you for your help, Hristo.

  7. Hristo
    Admin
    Hristo avatar
    1519 posts

    Posted 16 Jun 2017 Link to this post

    Hello Sergio,

    Thank you for the update.

    I am glad that you have managed to resolve the issue in the context of your actual scenario.

    In case you need further assistance please let me know.

    Regards,
    Hristo
    Progress Telerik
    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.
Back to Top