Currenlty I had made dashed line using the following code but in case points are less or inclined line it is not drawing correctly how to fix up the code ?:
Andrew Goldenbaum said:calculate
Thanks We had fetch the next points x y position on the graph using some logic and calculated the angle by using this code
based on the angle how to rotate the drawn line ?
Hello Muhammad,
As mentioned above, if the line is not straight, you will need to calculate the angle that you want to draw your dash at. Currently, your ctx.lineTo code is only creating a horizontal line, but unfortunately there is nothing on the DataTemplateRenderInfo that will tell you what the angle is to the next point. You would need to calculate this based on the index of your current data item to the next one’s value.
I will reiterate that dashed line capability in the IgxDataChart is currently not possible and will not be trivial to “force” into it. I would recommend voting on the existing product idea at the time of writing this: To have dashed line capability in the IgxDataChart is currently an existing product idea, and can be voted on here: https://ko.infragistics.com/community/ideas/i/ignite-ui-for-angular/configurable-lines-in-line-chart-ie-dotted-dashed-instead-of-solid-line---angular.
Please let me know if you have any other questions or concerns on this matter.
is the line is not straight how to fix it ?
I am under the impression that by the “inclined line,” you mean that the line is not horizontal in this case. I am unsure what you mean by “in case points are less” though. Do you mean if they are smaller values, or perhaps less of them?
If my impression about the inclined line is correct, then the reason this is incorrect in your case is because your ctx.lineTo code is only drawing a horizontal line. Unfortunately, there is nothing on the DataTemplateRenderInfo that will tell you what the angle is to the next point, though. This would need to be calculated by you by getting the next point in your data source and calculating the slope, and draw your line according to the angle rather than just adding to the x-value, as this will draw a horizontal line.
If by “in case points are less,” you mean that you have less points in the data source – you will need to add additional points, as we do not have a built-in way to achieve a dashed line in the IgxDataChart, and the marker template will only fire for data points in the chart that have markers drawn for them.
To have dashed line capability in the IgxDataChart is currently an existing product idea, and can be voted on here: https://ko.infragistics.com/community/ideas/i/ignite-ui-for-angular/configurable-lines-in-line-chart-ie-dotted-dashed-instead-of-solid-line---angular. It appears you have already commented on this, so I imagine you are aware of this.
Regarding your most recent update to this thread though, I am unsure what you mean about the “fix orientation” bit? Can you please elaborate on that?
Request for this feature urgently is there any way around and fix orientation
?