Wrong area chart if multiple value axis

14 posts, 0 answers
  1. Kai
    Kai avatar
    3 posts
    Member since:
    Jul 2017

    Posted 18 Jul Link to this post

    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

     

  2. Kai
    Kai avatar
    3 posts
    Member since:
    Jul 2017

    Posted 18 Jul Link to this post

    Another question is is there any way to set the multiple value axis with the same horizontal line for value 0?
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 20 Jul Link to this post

    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 visualization (charts) and form elements.
  4. Kai
    Kai avatar
    3 posts
    Member since:
    Jul 2017

    Posted 21 Jul in reply to Alex Hajigeorgieva Link to this post

    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?

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 24 Jul Link to this post

    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 visualization (charts) and form elements.
  6. marvin
    marvin avatar
    8 posts
    Member since:
    Aug 2017

    Posted 17 Aug in reply to Alex Hajigeorgieva Link to this post

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

  7. marvin
    marvin avatar
    8 posts
    Member since:
    Aug 2017

    Posted 17 Aug Link to this post

    check this out:  http://dojo.telerik.com/Aminin/19
  8. Milena
    Admin
    Milena avatar
    244 posts

    Posted 18 Aug Link to this post

    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.
  9. marvin
    marvin avatar
    8 posts
    Member since:
    Aug 2017

    Posted 20 Aug in reply to Milena Link to this post

    Then it doesn't look correct for the first series data.
  10. Milena
    Admin
    Milena avatar
    244 posts

    Posted 21 Aug Link to this post

    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.
  11. marvin
    marvin avatar
    8 posts
    Member since:
    Aug 2017

    Posted 25 Aug in reply to Milena Link to this post

    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?

  12. Milena
    Admin
    Milena avatar
    244 posts

    Posted 28 Aug Link to this post

    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.
  13. marvin
    marvin avatar
    8 posts
    Member since:
    Aug 2017

    Posted 30 Aug in reply to marvin Link to this post

    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? 

  14. Milena
    Admin
    Milena avatar
    244 posts

    Posted 31 Aug Link to this post

    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.
Back to Top