Wrong area chart if multiple value axis

[Kai]

Hi,

I have an issue when create an area trend chart with multiple value axis.

Sample: http://dojo.telerik.com/Aminin/10

In the first chart, it has 2 value axis, and the "World" series show wrong area.

In the second chart, it has only 1 value axis, and the only series "World" show correct area.

Please let me know if I missed anything or if it's a bug.

Thanks

Kai

 

[Kai]

Another question is is there any way to set the multiple value axis with the same horizontal line for value 0?

[Alex Hajigeorgieva]

Hi Kai,

The reason why the data looks different in the second chart is the axisCrossingValue. If you change the second Kendo UI Chart to have a value axis which crosses its category axis at -500 in this case, the data displayed will look identical:

http://dojo.telerik.com/Aminin/11

Regarding the second question, could you please elaborate what is the requirement so I can suggest the most appropriate approach for your scenario?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kai]

Thanks Alex!

About the requirement in the second question, is it possible to make the 2 highlighted 0 axis to be in the same line in the attached screenshot?

[Alex Hajigeorgieva]

Hello Kai,

It is possible to align multiple axes by setting their min and max configuration options:

http://dojo.telerik.com/Aminin/13

I think you should also check the official multiple axes demo which deals with the same scenario:

http://demos.telerik.com/kendo-ui/line-charts/multiple-axes

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[marvin]

ok,can we change another way, let's keep the second chart as it is..

I want to set the axisCrossingValue to be 0 for axis B, series B, however it doesn't work, is this expected? or it's a bug?

 

valueAxis: [{
                  name: "A",
                  field:'value',
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },{
                name: "B",
                  field:'value',
                  axisCrossingValue: 0
                }]

[marvin]

check this out:  http://dojo.telerik.com/Aminin/19

[Milena]

Hello,

I would suggest you to set axisCrossingValue to the corresponding value of axis A in the first Chart.
Here, you can see an example of the suggested configuration.

Regards,
Milena
Progress Telerik

[marvin]

Then it doesn't look correct for the first series data.

[Milena]

Hello,

The observed behavior is expected, because axisCrossingValue of the primary axis(axis 'A' in your scenario) by default is 0. We do not support multiple axisCrossingValue and KendoUI Chart always consider axisCrossingValue of the primary axis as the valid value. So it is needed to set the desired value to the primary axis instead of axis B.

Regards,
Milena
Progress Telerik

[marvin]

I find a way to have the chart get aligned at 0,  http://dojo.telerik.com/Aminin/29   but the valueAxis labels get too many decimals, is there away to get rid of that? How does the default kendo ui chart handle this when there is no min/max set?

Another issue, as you can see from the chart, there is no 0 shown up on the valueAxis. I think this is related to this valueAxis.min value, any idea regarding how to show zero on the valueAxis?

[Milena]

Hello,

You can control the values on valueAxis via min and max properties. In case, Chart has no min and max values set, the widget will set such values that will allow the whole data to be displayed properly. 

In regard of the second question, I can see 0 value on the both Charts in your example. Can you specify where exactly should be displayed the missing value?

Regards,
Milena
Progress Telerik

[marvin]

for the issue after set min/max to the valueAxis (http://dojo.telerik.com/Aminin/28 )

I think I can adjust the min value to achieve showing 0 on valueAxis and get rid of the decimals, but the key is I need to know the majorUnit. How does kendo ui chart calculate "majorUnit" by default?

In my case , the step for the two valueAxises are 100 and 1 respectively, in this way , I can adjust the min value of the percentage valueAxis to be -5%  and the other one to be -500, and everything looks good then  http://dojo.telerik.com/Aminin/29

but I need the majorUnit to calculate new min value, so the the question is how to get the majorUnit, how can I calculate this variable in terms of a general solution? 

[Milena]

Hello,

Here, you can find an example how to calculate and set majorUnit. I would suggest you to try the provided example and verify if you can integrate it in your project.

Regards,
Milena
Progress Telerik