Area Chart - Below Value use different Background Color

11 posts, 3 answers
  1. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 14 Aug 2017 Link to this post

    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!

  2. Daniel
    Admin
    Daniel avatar
    2202 posts

    Posted 16 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 24 Aug 2017 Link to this post

    Any other solution? Maybe not exactly Area Chart but something else closer to the desired chart image?
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2202 posts

    Posted 25 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 28 Aug 2017 in reply to Daniel Link to this post

    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

  6. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 29 Aug 2017 Link to this post

    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

  7. Answer
    Daniel
    Admin
    Daniel avatar
    2202 posts

    Posted 30 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 30 Aug 2017 in reply to Daniel Link to this post

    Thank you very much Daniel!
  9. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 01 Nov 2017 Link to this post

    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

     

  10. Answer
    Daniel
    Admin
    Daniel avatar
    2202 posts

    Posted 02 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Georgi
    Georgi avatar
    18 posts
    Member since:
    Feb 2015

    Posted 09 Nov 2017 Link to this post

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

    Thank you! Everything is 200.

Back to Top