How do I make a dashed line with an arrow symbol?

I am trying to make this diagram, my questions are about the parts circled with YELLOW.

I know my points represented with the green dots.  I am having trouble connecting the dots.  This is my code


          ChartSeries arrow = new ChartSeries("arrow", ChartSeriesType.Line);

            arrow.Points.Add(T1, P1);
            arrow.Points.Add(T2, P2);
            arrow.Style.Interior = new Syncfusion.Drawing.BrushInfo(Color.Red);

          chartPhaseDiagram.Series.Add(arrow);

1.  How do I make a DASHED line?
2.  How do I make an ARROW symbol in that DASHED line?



5 Replies 1 reply marked as answer

SJ Suyamburaja Jayakumar Syncfusion Team July 1, 2020 06:31 PM UTC

Hi Beth Taylor, 
 
Greetings from Syncfusion. 
 
Query1: How do I make a DASHED line? 
 
We would like to let you know that your requirement has been achieved by using the dash style for chart series border with different patterns like custom, dash, dash dot, etc. Please refer the below code snippet. 
 
C#: 
ChartSeries series1 = new ChartSeries("Series Name", ChartSeriesType.Spline); 
            series1.Style.Interior = new Syncfusion.Drawing.BrushInfo(Color.Blue); 
            series1.SortPoints = true; 
            series1.Style.Border.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash; 
            this.chartControl1.Series.Add(series1); 
 
Query2: How do I make an ARROW symbol in that DASHED line? 
 
We would like to let you know that your requirement has been achieved by using the custom symbols as per the below code snippet. 
 
C#: 
ChartCustomPoint cp1 = new ChartCustomPoint(); 
            cp1.Symbol.Shape = ChartSymbolShape.Arrow; 
            cp1.Symbol.Color = Color.Green;  
            cp1.CustomType = ChartCustomPointType.ChartCoordinates; 
            cp1.XValue = -100; 
            cp1.YValue = 58; 
            this.chartControl1.CustomPoints.Add(cp1); 
 
More information please refer the below UG link, 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Suyamburaja J. 
 



BT Beth Taylor July 1, 2020 08:20 PM UTC

Thank you for your response.  I've tried the code to make the arrow and it is not the effect I want.

Do you have any advice on how I can create a dashed line and make the last dash an arrow?





SJ Suyamburaja Jayakumar Syncfusion Team July 2, 2020 07:00 AM UTC

Hi Beth Taylor, 
 
Thanks for your update. 
 
We would like to let you know that your requirement has been achieved by using the Series symbols in the specific place as per the below code snippet. 
 
C#: 
ChartSeries series1 = new ChartSeries("Series Name", ChartSeriesType.Spline); 
            series1.Style.Interior = new Syncfusion.Drawing.BrushInfo(Color.Red); 
            series1.Styles[1].Symbol.Shape = ChartSymbolShape.Arrow; 
            series1.Styles[1].RelatedPoints.Width = 1; 
            series1.Styles[1].Symbol.Color = Color.Red; 
            series1.Styles[1].Symbol.Border.Color = Color.Red; 
            series1.Style.Border.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash; 
            series1.Style.Border.Width = 3; 
 
  
Screenshot: 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Suyamburaja J. 



BT Beth Taylor July 2, 2020 12:34 PM UTC

Thank you for your reply.  However, the sample code does not provide what I need to draw.  See my example attached. 



SJ Suyamburaja Jayakumar Syncfusion Team July 3, 2020 01:13 PM UTC

  
  
Sorry for misunderstood.  
 
Please find the solution to obtain the desired view by using ChartCustomPoint as below, 
 
C#: 
ChartCustomPoint cp1 = new ChartCustomPoint(); 
            cp1.Symbol.Shape = ChartSymbolShape.Circle; 
            cp1.Symbol.Color = Color.Green; 
            cp1.Symbol.Border.Color = Color.Transparent; 
            cp1.Symbol.Size = new Size(10,10); 
            cp1.CustomType = ChartCustomPointType.ChartCoordinates; 
            cp1.XValue = 10; 
            cp1.YValue = 10; 
            this.chartControl1.CustomPoints.Add(cp1); 
 
            ChartCustomPoint cp2 = new ChartCustomPoint(); 
            cp2.Symbol.Shape = ChartSymbolShape.Circle; 
            cp2.Symbol.Color = Color.Green; 
            cp2.Symbol.Border.Color = Color.Transparent; 
            cp2.Symbol.Size = new Size(10, 10); 
            cp2.CustomType = ChartCustomPointType.ChartCoordinates; 
            cp2.XValue = 50; 
            cp2.YValue = 10; 
            this.chartControl1.CustomPoints.Add(cp2); 
 
            ChartCustomPoint cp3 = new ChartCustomPoint(); 
            cp3.Symbol.Shape = ChartSymbolShape.Arrow; 
            cp3.Symbol.Color = Color.Red; 
            cp3.Symbol.Border.Color = Color.Red; 
            cp3.CustomType = ChartCustomPointType.ChartCoordinates; 
            cp3.XValue = 50; 
            cp3.YValue = 10; 
            this.chartControl1.CustomPoints.Add(cp3); 
 
 
Screenshot: 
 
 
 
One more suggestion, use the previous provided suggestion arrow style only for particular data point not for entire series. 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Suyamburaja J. 


Marked as answer
Loader.
Up arrow icon