Column charts, multiple x-axis when negative values present

6 posts, 1 answers
  1. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 23 Jan 2015 Link to this post

    Hi
       If you look at the chart below you'll see there are 2 x-axes, they are getting merged together

      http://dojo.telerik.com/AhaPI/2

    This only happens when there are negative values present, if you change the first value of the series to a positive one
    it works as expected

    thanks
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 27 Jan 2015 Link to this post

    Hi,

    What happens here is that the chart tries to place both axes at 0 position on the value axis.
    This behavior can be disabled by tuning the axisCrossingValue setting on the value axis.
    valueAxis: {
      line: {
        visible: false
      },
      axisCrossingValue: [-1e6, -1e6]
    }

    The dojo snippet is here

    We specify an out-of-range negative value so the axes will always sink to the bottom.
    It's an array in this case, one value for each category axis.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 29 Jan 2015 in reply to T. Tsonev Link to this post

    Hi
      Thanks for the reply.
      It's better than nothing but it would be better if you could have the axis' at the bottom but still have the inverted blocks to make it clear when they cross zero

    thanks
    Anthony
  4. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 29 Jan 2015 in reply to Anthony Link to this post

    Also, this is a minor point but I notice the second axis needs quotes in the final category position, i.e.

    categories: [, , , , , ""]

    if you don't do this the axis get out of step even if they have the same number of steps

    e.g.

    http://dojo.telerik.com/oJOjo
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 02 Feb 2015 Link to this post

    Hello,

    The categories array issue is not a problem with the chart, but with the way JS handles empty array items.
    Try this in the console:
    [, , , , , ].length
    > 5
    [1, 2, 3, 4, 5, 6].length
    > 6

    You see that the last item is discarded in the first case.

    In order to keep the negative bars where there are we'll need to add a third axis.
    I know it sounds a bit of an overkill, but this gives us a chance to position all axes independently:
            categoryAxis: [{
              // "Significant axis"
              visible: false
            }, {
              // Label axis
              categories: [1, 2, 3, 4, 5, 6]
            }, {
              // Label axis
              categories: [1, 2, 3, 4, 5, 6]
            }],
            valueAxis: {
              axisCrossingValue: [0, -1e6, -1e6]
            }


    See the updated snippet.
    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 02 Feb 2015 in reply to T. Tsonev Link to this post

    (1) The empty array item issue. The only odd thing there is that both of the axis have missing items at the end so you would have thought they would both be out by the same amount. That being said I wasn't aware of the Javascript array issue and there's an easy fix so that's ok.

    (2) Thanks for the axis fix, that works
Back to Top