Area Chart - Below Value use different Background Color

[Georgi]

Hello,

 

Is it possible to change the series background color when it is below some value for example 0.

I am trying to achieve something like the attached image.

Using Angular 4.

 

Thank you!

[Daniel]

Hello,

This is not supported by the chart. The series are rendered as single path so there isn't a way to set different colors for specific range. It should be possible to implement this using multiple series and missingValues 'gap' - example.

Regards,
Daniel
Progress Telerik

[Georgi]

Any other solution? Maybe not exactly Area Chart but something else closer to the desired chart image?

[Daniel]

Hello again,

You can use line series if the part above the predefined value should not be filled. If the orientation should be vertical like in the image you can use verticalLine and verticalArea - updated example.

Regards,
Daniel
Progress Telerik

[Georgi]

Hello,

I think this is a great example and could be used in my case. The problem is I need to use X axis and Y axis with their fields, can this be done in any way with this example?

Thank you once again,

Georgi

[Georgi]

Hello,

I've managed to do the following: Plnkr

Your example was really helpful and right what I needed.

One last thing - can you tell me how to move the Y axis on its left-most position and to keep my offset, the verticalArea to stay the same.

Maybe two category axes (one visible and one not, a dummy visible axis) and two value axes, but I didn't find a way to link them together..

Thank you!

Georgi

[Daniel]

Hi,

The area is filled to the crossing value so yes, a second axis will be required to show the axis on the left without changing the area - example.

Regards,
Daniel
Progress Telerik

[Georgi]

Thank you very much Daniel!

[Georgi]

Hello,

 

I need some help again with the same scenario.

The problem is that I need to visualize three different lines on the same chart and to achieve the same result as before.

Can you help me with this issue, I've tried different ways but all of them are not giving the desired result.

Here are some images of what I want to achieve. But there is also a special case where the lines are on top of each other (their down values also need to be with black area).

Is this even possible with Kendo UI Charts?

 

Thanks for the help,

Georgi

 

[Daniel]

Hi,

You could use separate category axes with different crossing values for the other series in order to achieve this - example.

Regards,
Daniel
Progress Telerik

[Georgi]

Thank you Daniel! Once again u solved it! With small tweaks I made it look as I wanted.

Thank you! Everything is 200.