This is a migrated thread and some comments may be shown as answers.

Column charts, multiple x-axis when negative values present

5 Answers 416 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 23 Jan 2015, 03:03 PM
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

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 27 Jan 2015, 12:40 PM
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!
 
0
Anthony
Top achievements
Rank 1
answered on 29 Jan 2015, 07:49 AM
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
0
Anthony
Top achievements
Rank 1
answered on 29 Jan 2015, 10:08 AM
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
0
Accepted
T. Tsonev
Telerik team
answered on 02 Feb 2015, 06:48 AM
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!
 
0
Anthony
Top achievements
Rank 1
answered on 02 Feb 2015, 08:31 AM
(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
Tags
Charts
Asked by
Anthony
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Anthony
Top achievements
Rank 1
Share this question
or