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

Wrong area chart if multiple value axis

13 Answers 208 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kai
Top achievements
Rank 1
Kai asked on 18 Jul 2017, 08:05 AM

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

 

13 Answers, 1 is accepted

Sort by
0
Kai
Top achievements
Rank 1
answered on 18 Jul 2017, 03:10 PM
Another question is is there any way to set the multiple value axis with the same horizontal line for value 0?
0
Alex Hajigeorgieva
Telerik team
answered on 20 Jul 2017, 07:50 AM
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
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 (charts) and form elements.
0
Kai
Top achievements
Rank 1
answered on 21 Jul 2017, 10:18 AM

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?

0
Alex Hajigeorgieva
Telerik team
answered on 24 Jul 2017, 03:13 PM
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
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 (charts) and form elements.
0
marvin
Top achievements
Rank 1
answered on 17 Aug 2017, 07:57 AM

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
                }]

0
marvin
Top achievements
Rank 1
answered on 17 Aug 2017, 07:58 AM
check this out:  http://dojo.telerik.com/Aminin/19
0
Milena
Telerik team
answered on 18 Aug 2017, 01:57 PM
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
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.
0
marvin
Top achievements
Rank 1
answered on 21 Aug 2017, 01:46 AM
Then it doesn't look correct for the first series data.
0
Milena
Telerik team
answered on 21 Aug 2017, 12:55 PM
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
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.
0
marvin
Top achievements
Rank 1
answered on 25 Aug 2017, 09:03 AM

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?

0
Milena
Telerik team
answered on 28 Aug 2017, 03:26 PM
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
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.
0
marvin
Top achievements
Rank 1
answered on 30 Aug 2017, 10:02 AM

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? 

0
Milena
Telerik team
answered on 31 Aug 2017, 01:36 PM
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
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.
Tags
Charts
Asked by
Kai
Top achievements
Rank 1
Answers by
Kai
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
marvin
Top achievements
Rank 1
Milena
Telerik team
Share this question
or