Category Axis labels issue

28 posts, 0 answers
  1. Venkatesh
    Venkatesh avatar
    1 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    Hi,
    i am using kendo ui stacked column chart ,
    the series data  contains some negative values, due that category axis labels moving up.
    so please resolve my issue
    for more info please see attached picture
    thanks in advance
  2. André
    André avatar
    2 posts
    Member since:
    Dec 2011

    Posted 16 Feb 2012 Link to this post

    Hello,
    I have
    the same problem, with the negative values in the bar char.
    I try searched in the documentation, but i dont found the solution.
    Att,
  3. Kendo UI is VS 2017 Ready
  4. DerekAlfonso
    DerekAlfonso avatar
    16 posts
    Member since:
    Feb 2010

    Posted 29 Feb 2012 Link to this post

    Hi,

    I'm also having the same issue, is there any resolution in the new beta?

    Thanks
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 02 Mar 2012 Link to this post

    Hello,

    The axis labels are positioned next to the axis. We don't provide an option to move the labels to the bottom, but you can move the whole axis there:

    valueAxis: {
        axisCrossingValue: -4
    }

    This is similar to how MS Excel handles the problem.

    We've noticed that we do not handle stacked charts correctly, so this won't work for them. We'll start working on a fix right away.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dhatchana
    Dhatchana avatar
    1 posts
    Member since:
    Mar 2012

    Posted 14 Mar 2012 Link to this post

    axisCrossingValue is working good.
    Thank you  team..
  7. Chamin
    Chamin avatar
    10 posts
    Member since:
    Mar 2012

    Posted 12 Aug 2012 Link to this post

    Hi,
    Step1:
    I have a chart with negative and positive values. without axis move it look likes,
    valueAxis: [{
                        title: { text: "Sales" },
                        plotBands: [{
                            from: 0,
                            to: -40000,
                            color: "#F7F2BB"
                        }]



    Step 2: I added the property as you said. Then it looks like ,

    valueAxis: [{
                        title: { text: "Sales" },
                        axisCrossingValue: -40000,
                        plotBands: [{
                            from: 0,
                            to: -40000,
                            color: "#F7F2BB"
                        }]



    Step3:
    Now I changes the property as follows,
    valueAxis: [{
                        title: { text: "Sales" },
                        axisCrossingValue: [-40000, 40000],
                        plotBands: [{
                            from: 0,
                            to: -40000,
                            color: "#F7F2BB"
                        }]

    then chart looks like,


    So actually these properties are working great if we have a line and scatter charts.
    But it looks wired when we have a bar charts (look step2).
    Actually my requirement is to have chart like in first step and labels should be place in botoom of the chart as step 2/3.

    Please help me to do this.
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Aug 2012 Link to this post

    Hello,

    Thank you for your feedback. We'll try to enable the second behavior (bars starting from 0) for the Q3 release. We'll follow up with more details when we're ready.

    For the moment, you can tweak the axis labels margins in order to move them outside. See http://jsbin.com/ahavog/3/edit for a demo.

    I hope this helps.

    Kind regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Chamin
    Chamin avatar
    10 posts
    Member since:
    Mar 2012

    Posted 19 Aug 2012 Link to this post

    Dear Tsonev ,

    Thanks for the prompt support and worker-round.

    Thanks & Best Regards,
    Chamin
  10. Joel
    Joel avatar
    4 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    Hi Tsvetomir,

    I'm running into a similar situation where, in the case of negative values, I would like to keep the x and/or y axes where they are but have the labels render at the bottom and/or left of the chart. From what I've read it sounds like this isn't possible, or only as a workaround by setting margins.  Is this still the case, and if so are there any plans to add support for this?

    Also, was the behavior you mentioned for 2012 Q3 (bars starting from 0) added, or if not, planned for a pending release?

    Thanks!
    --Joel
  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 28 Jan 2013 Link to this post

    Hi,

    We don't have a dedicated option for positioning the labels at the outer edges. We can now offer an alternative that doesn't rely on guessing pixel sizes. It works by adding a secondary category axis (new feature) that is only used to show the labels: http://jsbin.com/ahavog/61/edit

    This approach is more flexible, but might prove to be an overkill for such a simple task. We'll consider a dedicated option as well.

    The bars now render from the 0 point (or closest) regardless of category axis position.

    Kind regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Joel
    Joel avatar
    4 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2013 Link to this post

    Thanks Tsvetomir! I think that pretty much gets me going.

    One minor thing I did notice is that if I have multiple Y value axes with different ranges the zero values no longer line up, for instance if one axis has a range from -10 to 10 and the other has a range from, say, -4 to 8, 0 on the first axis lines up with 2 on the second.  

    This is a change from at least v2012.2.710, where the axes would adjust vertically so the 0s were aligned. This made the axes look off kilter but if you were plotting columns positive and negative they would all be at the same horizontal position. Do you know if there is a way to configure the charts to get back to this behavior?  


    Thanks!
    --Joel
  13. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 31 Jan 2013 Link to this post

    Hi,

    Thank you for reporting this problem. This change was intentional, but we failed to foresee this particular scenario.

    There's no way to get the old behavior with the current version. We'll try to figure out a way to make this possible.

    Apologies for the caused inconvenience.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 09 May 2013 Link to this post

    Using a secondary category axis works, but it breaks the seriesClick handler if your code needs to detect what category was clicked (e.category will be undefined). To workaround that issue, you need to make sure to define your categories in the default axis (in addition to the secondary axis), and then make them hidden, like this:

    categoryAxes: [{
                          // Default axis, no labels. 
                         // But be sure to define the categories if you want seriesClick e.category  to be defined.
                           categories: ["A", "B", "C"],
                           labels:{visible:false}
    }

    See the example here:
    http://jsbin.com/uwejij/1/edit

  15. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 May 2013 Link to this post

    Hello,

    Thanks for the heads-up Ryan. We'll try to fix this problem.

    Kind regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Joe
    Joe avatar
    14 posts
    Member since:
    May 2010

    Posted 20 May 2013 Link to this post

    Hi, Do you have a specific algorithm to calculate the value axis ranges?

    I'd like to calculate the minimum value for the axis so I can use it as a value for the axisCrossingValue option.

    Thanks
  17. Joe
    Joe avatar
    14 posts
    Member since:
    May 2010

    Posted 21 May 2013 Link to this post

    I released that if I do this:

    valueAxis: {
                        axisCrossingValue: -9007199254740992,
                        labels: {
                            format: "€{0:N0}"
                        }
                    }
    It pushes the crossing value to the bottom always. Obviously because I will never reach that value :)
  18. Kevin
    Kevin avatar
    8 posts
    Member since:
    Oct 2010

    Posted 15 Aug 2013 Link to this post

    The workaround for setting axis crossing value to negative does not seem effective in my case.

    When there is a data point with a negative value and another data point with value = 0 a bar is rendered for the 0 value?  (see attachment: The green bars are both value=0).

    Another issue, positive values (see second orange bar) do not start at 0?

    Here are the data points since I didn't show the labels:
      Period To Date - Actual (orange #1)   = -1100.00
      Period To Date - Budget (green #1) =           0.00
      Year To Date - Actual  (orange #2)   =     2700.00
      Year To Date - Budget (green #2)  =              0.00

    Also I actually want the axis to appear at 0 to have a clearer separation between positive and negative (important for financials reporting).  Well this probably wouldn't be a big issue if the positive bars started at 0?

    Is there any way to resolve this? 
  19. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 20 Aug 2013 Link to this post

    Hi,

    The bars will indeed extend from the axis to the designated value. The behavior you're seeking is more like a range bar (currently unsupported) that is drawn between two absolute values.

    I wonder if using a secondary axis for the labels is a viable approach for you?

           valueAxis: {
              // Keeps the default axis at the 0 crossing point
              // and moves the "label" axis to the left
              axisCrossingValues: [0, -Infinity]
            },
            categoryAxes: [{
              labels:{
                visible:false
              }
            }, {
              categories: ["Period To Date", "Year To Date"],
              line: {
                visible: false
              }
            }]


    -- Live demo --

    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!
  20. Kevin
    Kevin avatar
    8 posts
    Member since:
    Oct 2010

    Posted 20 Aug 2013 Link to this post

    Thank you T. Tsonev,

    Your solution worked perfectly.  By hiding the labels on the category axis and creating a secondary axis for the labels outside the charting area solved the issue.

    Might I suggest that the default behavior should be that the category axis labels are drawn outside the charting area as demonstrated here so that it would support negative values more easily?

    Thanks again for your help.
  21. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 21 Aug 2013 Link to this post

    Hello,

    I agree that the two-axis approach a bit cumbersome. I guess we can get away with a simpler solution - an option that specifies that the labels should be positioned outside the chart.

    We'll consider this feature for our future releases. Thank you for your feedback.

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

    Posted 21 Oct 2015 in reply to T. Tsonev Link to this post

    Hi,

    I am trying to ensure that my category labels appear underneath my chart even with negative values and have found this forum post. I have achieved this in this jsbin http://jsbin.com/comeqe/edit?html,output

    However, once I add the second category axis in the vertical lines in my chart disappear. Try commenting out the first category axis as noted in the jsbin - the vertical lines appear but the labels are now incorrectly placed. 

    Can you show me how to place the labels at the bottom (without resorting to padding) and have the vertical lines appear also?

    Also, can you tell me if having the category labels appear aat the bottom of the chart is a feature planned for kendo data visualization?

     Thanks,

    Ciaran

  23. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 26 Oct 2015 Link to this post

    Hello,

    The vertical lines visibility will follow the visibility of the main line. You need to set its visibility explicitly:
        majorGridLines: {
           visible: true
       }


    See the
    updated snippet.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  24. Aztec Web Team
    Aztec Web Team avatar
    1 posts
    Member since:
    Sep 2010

    Posted 16 Mar in reply to T. Tsonev Link to this post

    Hi guys,

    Have you guys implemented that idea where there is a setting to specify that labels should be positioned outside the chart?

     

    Thanks

  25. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 22 Mar Link to this post

    Hello,

    No, the suggested workaround is still the recommended option to achieve that.

    Please, file a request for this feature on our UserVoice portal if you have minute.
    This will help us gauge the overall interest and prioritize.

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

    Posted 01 Jun Link to this post

    Hi,

    I have the same issue for Radar Column chart which is similar to this sample i created 

    http://dojo.telerik.com/@Sunil/aFowI

    I tried adding " " for alternate labels, it works on UI but if the image is exported to PDF/Excel then we can see   as a text.

    Thanks

    Sunil

  27. Sunil
    Sunil avatar
    3 posts
    Member since:
    Jun 2014

    Posted 01 Jun in reply to T. Tsonev Link to this post

    Hi,
    I have the same issue for Radar Column chart which is similar to this sample i created 
    http://dojo.telerik.com/@Sunil/aFowI
    I tried adding " " for alternate labels, it works on UI but if the image is exported to PDF/Excel then we can see   as a text.
    Thanks
    Sunil
  28. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 07 Jun Link to this post

    Hello,

    Please accept my apologies for the delayed response.

    I've lost quite a lot of time with a more complex solution, but in the end settled on a simpler approach.
    You just need to insert line breaks - "\n", in the label text via the template.

                categoryAxis: {
                  field: "name",
                  labels: {
                    template: function(e) {
                      return e.value.split("+ ").join("+\n");
                    }
                  }
                }

    See the updated example. I'll also update the Show Category Axis Labels on Multiple Lines how-to article.

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

    Posted 07 Jun in reply to T. Tsonev Link to this post

    Thank you for your reply.

    I tried this example before my post 

    function labelTemplate(e) {var ds = $("#chart").data("kendoChart").dataSource;var index = ds.indexOf(e.dataItem);var label = index % 2 !== 0 ? " \n" : ""; label += e.value;return label;}

    This works perfect on UI, but when i export the image to PDF the labels on PDF shows " " as well with the actual label.

    Solution above works fine to add a new line character within a word, I modified my example with a long label.

    http://dojo.telerik.com/@Sunil/aFowI

    Thanks

    Sunil

     

Back to Top
Kendo UI is VS 2017 Ready