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
Randall Blevins
175
Angular Chart Overlays over Time range?
posted

Hello,

A bit of background on what I am trying to do.  I have a Line Chart that is going to be plotting power consumption on the Y-Axis over time on the X-Axis.  One of the requirements for this chart is when power goes above or below a certain threshold, I need to be able to color code that time range accordingly (for example if power exceeds 1000 Watts from July 1st - July 3rd, I need to be able to indicate that time range as red on the graph background).

I was looking at the Angular chart overlays, and thought this might work, however, it looks like this particular feature as far as I can tell, does not support a time range, and only supports a single value, would that be correct?  Is there another possible way to meet this requirement?

Any help or insight would be appreciated.

Thanks,

-Randall Blevins

  • 34810
    Offline posted

    Hello Randall,

    I have been investigating into the behavior you are looking to achieve, and I am under the impression that you are looking for a Line Chart where the line may be a different color when placed above a certain threshold. If this is not the case, please let me know as the following is based on that impression.

    In order to have this functionality in the IgxDataChartComponent, I would recommend using multiple IgxLineSeries instances where you can define a value path in your data source for each part of the threshold, as a “threshold line” chart would not be possible with a single IgxLineSeries.

    Regarding the overlays, I am assuming you are referring to the IgxValueOverlay, in which case, you are correct that there can only be a single value that that particular overlay takes, although you can have more than one overlay if you would like.

    If you would like to see a “threshold line series” potentially implemented in a future version of the Ignite UI for Angular toolset, I would recommend suggesting a new product idea for this at our Angular Ideas Site, here: https://es.infragistics.com/community/ideas/i/ignite-ui-for-angular. 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.