Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Umer Waheed
145
Step Chart
posted

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. 

  • green color line in chart representing productive state in below attachment.
  • Yellow color line in chart representing idle state in below attachment.   

Regards,

Umer Waheed

Parents
No Data
Reply
  • 34830
    Offline posted

    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.

Children