We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to create a dashed chart that doesn't connect all the points?

I would like to achieve something like this:

Clipboard01.png

The idea is that I will have 2 set of data plotted in the chart and I don't want to connect all of them, just the points of each set.


This is what I have so far:
Clipboard02.png

Please also notice that:
1- although I only added 3 dates in X axle, the chart is showing 7 dates.
2- I don't want that 'Empty' label
3- I need a caption at the bottom of the chart (see first screenshot as a reference)
4- I would like to change the chart border lines to gray instead of black, ideally removing the one at right (again, using the first screenshot as a reference)

Thanks in advance!


8 Replies

RA Rafael November 30, 2022 01:54 AM UTC

After digging a bit deeper I managed to almost match the first screenshot:

Clipboard01.png


I'm wondering why the last points appear before Aug 2019, since the date range goes up to 6th of August. I'm attaching the demo so you can take a look at the code.

Thanks!


Attachment: WinFormsApp1_cdcf3565.zip


NM Nanthini Mahalingam Syncfusion Team November 30, 2022 12:49 PM UTC

Hi Rafael,


We analyzed your query, and we are validating the data point arrangement in the provided attachment. We will update the complete details on December 1st, 2022.


Regards,

Nanthini Mahalingam.



RA Rafael December 1, 2022 02:42 AM UTC

Thanks a lot, Nanthini!

I managed to fix the points appearing before Aug 2019.

So what's left is:
1- removing the 2 black vertical lines at very left and very right of the chart
2- adding padding to the bottom and left of the chart so that the range values (e.g. dates) don't appear too close to the chart.
3- making the icons hollow (like the reference screenshot)

Thanks once again :)



NM Nanthini Mahalingam Syncfusion Team December 1, 2022 03:13 PM UTC

Query 1: removing the 2 black vertical lines at very left and very right of the chart

We have analyzed your query, and we can remove the left and right vertical lines by setting the grid line type ForeColor as Transparent for PrimaryXAxis and PrimaryYAxis.


https://help.syncfusion.com/windowsforms/chart/chart-axes#axis-gridline-linetype

chartControl1.PrimaryXAxis.GridLineType.ForeColor = Color.Transparent;

chartControl1.PrimaryYAxis.GridLineType.ForeColor = Color.Transparent;



Query 2: adding padding to the bottom and left of the chart so that the range values (e.g. dates) don't appear too close to the chart.

We can achieve the range values not being too close to the chart by setting EdgeLabelsDrawingMode as Shift, which aligns the edge label inside the chart area for PrimaryXAxis. When we give EdgeLabelsDrawingMode as center, which aligns the edge label in the center, and when we give EdgeLabelsDrawingMode as ClippingProtection, which hides the edge label partially.


https://help.syncfusion.com/windowsforms/chart/chart-axes#chartaxisedgelabelsdrawingmode

  chartControl1.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Shift;



Query 3: making the icons hollow (like the reference screenshot)

We can make the hollow icon by setting the symbol DimmedColor property as Transparent for series style as per code sample attachment and output demo snippet.


https://help.syncfusion.com/windowsforms/chart/chart-series#symbol

  series.Styles[series.Points.Count - 1].Symbol.DimmedColor = Color.Transparent;



Output Demo:



Attachment: SF179145_beedff81.zip


RA Rafael December 2, 2022 12:30 AM UTC

Nanthini, thanks once again!


When I said I was looking for a way to add some padding in the chart I was talking about vertical padding between the X (date) legends and the chart, and horizontal padding between the Y (values) legends and the chart.


I also, I would like to make the horizontal grid lines appear over the blue range area, like in this screenshot:Clipboard01.png

What I'm having at the moment is this instead (the grid lines don't show over the blue range area):
Clipboard02.png

Please see the attached project for the updated code.


Attachment: WinFormsApp1_7db06396.zip


NM Nanthini Mahalingam Syncfusion Team December 2, 2022 11:03 AM UTC

Query 1: To add some padding in the chart I was talking about vertical padding between the X (date) legends and the chart, and horizontal padding between the Y (values) legends and the chart.


Thanks for your update,

We can achieve padding between the axis label and chart by setting TickSize and TickColor to Transparent for PrimaryXAxis and PrimaryYAxis as per the code below and also sample.

https://help.syncfusion.com/windowsforms/chart/chart-axes#major-ticks

chartControl1.PrimaryXAxis.TickSize = new Size(1, 25);

chartControl1.PrimaryXAxis.TickColor = Color.Transparent;

 

chartControl1.PrimaryYAxis.TickSize = new Size(25, 1);

chartControl1.PrimaryYAxis.TickColor = Color.Transparent;


Query 2: To make the horizontal grid lines appear over the blue range area, like in this screenshot:

We can achieve the grid lines over the blue range by adding an Alpha value for the series interior color as per the code below.

public readonly Color lightCyan = Color.FromArgb(125,229, 247, 253);


Output Demo:



Attachment: SF179145_fe47756f.zip


RA Rafael December 4, 2022 09:46 PM UTC

Thanks a lot! I believe this issue can be closed :)



NM Nanthini Mahalingam Syncfusion Team December 5, 2022 09:49 AM UTC


We are glad to know that the queries has been resolved .Please let us know if you have any further queries on this. We are happy to help.


Loader.
Up arrow icon