Could you provide me assistance to have a graph like the attached image using aspnetmvc?

[Ramesh]

Hi,

I had tried using Telerik ASP.Net mvc area charts.But i found that its overlapping between series of two colors.The below graph shows that there is a normal oxygen level where limit is 5.The area lying below normal level is shown as red and those above as green.This is my requirement.But when i drawn using Area Chart,it plots like the below chart. For example,its showing  3.5 at 11 o clock.Then at 12 o clock,it has range above normal level with 5.Then why the red portion sliding down till 12o clock.I dont want this.Is there any suggestion for drawing like that?

[Iliana Dyankova]

Hi Ramesh,

If I understand correctly you would like to avoid the colors mixing where the series overlap? This can be achieved as set seriesDefaults.opacity option to 1:

//....
.SeriesDefaults(seriesDefaults =>
   seriesDefaults.Area().Opacity(1)
)

In case I am missing something please elaborate a bit more on the exact outcome you would like to achieve - this way I would be able to advice you further and provide concrete recommendations.

Regards,
Iliana Nikolova
Telerik

 

 

[Ramesh]

Ok my question is this.Is there any way to highlight in multiple colors for area chart ?if the values below normal range indicates red and those above with green as in the above attached image.

[Iliana Dyankova]

Hi Ramesh,

Thank you for the details. I am afraid this outcome is not supported by Kendo UI Area Chart and there is no a better workaround (than the one you have used) which I can suggest. Please accept my apologies for any inconvenience this may cause.

Regards,
Iliana Nikolova
Telerik