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.
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.”
Thanks this solves the problem the the linear interpolate is causing weird issue when point spacing is less
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”?
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 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