Area Chart - Below Value use different Background Color

8 posts, 2 answers
  1. Georgi
    Georgi avatar
    16 posts
    Member since:
    Feb 2015

    Posted 14 Aug 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
    2174 posts

    Posted 16 Aug 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
    16 posts
    Member since:
    Feb 2015

    Posted 24 Aug 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
    2174 posts

    Posted 25 Aug 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
    16 posts
    Member since:
    Feb 2015

    Posted 28 Aug 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
    16 posts
    Member since:
    Feb 2015

    Posted 29 Aug 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
    2174 posts

    Posted 30 Aug 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
    16 posts
    Member since:
    Feb 2015

    Posted 30 Aug in reply to Daniel Link to this post

    Thank you very much Daniel!
Back to Top