Dear Ignite Team,
Query:
How to draw step chart with different line color for each breakpoint/step.
You can refer below screenshot for more detail.
Expectations:
we need to draw different colored lines on chart.
Regards,
Umer Waheed
Hello Umer,
I have been investigating into the behavior you are looking to achieve in this case, and the IgxStepLineSeries does not currently expose a way to color the horizontal line differently than the vertical lines. The best recommendation I can make in this case is to overlay a separate series such as the IgxLineSeries or the IgxRangeColumnSeries to overlay the horizontal portions of the step series.
If you would like to see the ability to color the horizontal parts of the IgxStepLineSeries differently than the rest of the series, I would recommend suggesting a new product idea for this at our Ignite UI for Angular GitHub page here: https://github.com/igniteui/igniteui-angular/issues. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.
Please let me know if you have any other questions or concerns on this matter.
The event arguments of the assigningCategoryStyle event expose a getItems method as well as a startIndex and endIndex property that should act as the parameters of the getItems method. This will return a collection of items corresponding to the start and end indexes that you pass to the getItems method. If you use the startIndex and endIndex properties on the event arguments, this method will have a single item in it, as the event fires for each item.
If you are trying to color the flat areas of the StepLineSeries using this method though, I advise you not to go down this route because this will not work. This method works for coloring something like a column series differently because the different “rectangles” of a column series are different shapes. The various line series in the IgxDataChart are a single path shape, and as such the entire line will take the color that you give the last point. If no color is given, it will fall back on the brush of the entire line.
Is there any way to manipulate to show other chart as line, as we need to show lines like the above for project. Support ticket is being opened as well's there any custom way to achieve this\\ ?
I am a little bit confused by your most recent update. Can you please elaborate on what you mean by “show other chart as line” in this case?
I am also aware of the private support ticket you have opened. This is also assigned to me, but there is no other built-in way to color the flat parts of the Step Line Series in this case outside of overlaying a separate series over the IgxStepLineSeries. Calculating where this separate series may fall could be challenging in this case though, as the IgxStepLineSeries appears to be plotted differently than a typical IgxLineSeries.
I have put together a sample project that demonstrates the type of behavior that I believe you are looking to achieve, and at no point does it connect the lines incorrectly or make triangles on my end.
I also found what I believe to be a better way to achieve the requirement using two series in this case. You can have the “yellow” series be the first series plotted in the chart and the “green” one be the second. The green one only has to have data for the steps and have the rest of its value path be null, whereas the yellow one can be the full line. Since the green one will be “on top” of the yellow one, this will render the steps as green and the rest of it as yellow.
If this sample does not work for you, I would request that you please modify it and send it back so that it reproduces the behavior you are seeing.
DifferentColoredLine.zip
Issue:
When three points have minor difference then line chart is not plotting accurately and draw as triangle. We assume linear interpolation causing issue , we had also tried unknownValuePlotting="DontPlot" but still issue not resolved.
You can refer below attachment/video for more detail.
www.infragistics.com/.../2022_2D00_09_2D00_28_5F00_18_2D00_31_2D00_43.mp4
Expected result:
Line chart must be plotted in form of lines. It should not connect all three points.
Screenshot named "expected_result.png" attached for expected result
Note: When we zoom in the graph area then it works fine and don't make triangles.
I’m not sure I understand what is happening in the video? Can you please elaborate a bit on exactly how you are reproducing this issue and what you mean by “when point spacing is less”?
Thanks this solves the problem the the linear interpolate is causing weird issue when point spacing is less
I have taken a look at the JSON that you have provided, but I cannot tell which parts are related to the X and Y axis or where the yellow line differs from the green one?
Looking at the JSON file and the actual result versus the expected one though, I believe this is probably due to a difference in the number of categories in the data sources for the two series. If you bind to the same data source, I believe you only really need 2 series for the green and yellow lines in this case. If you have a single data item that contains both of the value paths for the green and yellow series, you could provide null or NaN for the values that you don’t want to be plotted for a particular series. For example, you could do something like the following:
{ Date: 14:00, greenValue: 5, yellowValue: null } (green), { Date: 14:01, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:02, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:03, greenValue: null, yellowValue: 5 } (yellow), { Date: 14:04, greenValue: 10, yellowValue: null } (green)
The above pseudo-data source would give you a green line that goes to 5, then a yellow line that goes along 5 for 3 seconds, and then another green line that would go from 5 to 10 if you had a pair of series with their value paths set to “greenValue” and “yellowValue.”