I would like to achieve something like this:
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:
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!
After digging a bit deeper I managed to almost match the first screenshot:
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!
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.
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 :)
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:
|
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:
What I'm having at the moment is this instead (the grid lines don't show over the blue range area):
Please see the attached project for the updated code.
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:
|
Thanks a lot! I believe this issue can be closed :)
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.