Bar chart category axis labels overlapping when their text is long

19 posts, 0 answers
  1. Arpit
    Arpit  avatar
    0 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    Hi,

    I am using Kendo UI basic bar chart to render contents.On category axis I am showing text strings which are some project categories.Due to long names labels are overlapping each other.I searched in documentation but not able to find the solution.So can you please tell me how to get rid from that.I am attaching the sample chart image.


    Thanks 
    Arpit Agrawal
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 04 Dec 2013 Link to this post

    Hi Arpit,

    There is no a built-in solution for preventing labels overlapping, however you could try the following workarounds:

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    12 posts
    Member since:
    Jul 2011

    Posted 19 Jun 2015 in reply to Iliana Nikolova Link to this post

    Any chance of getting functionality similar to this - http://peltiertech.com/Excel/Charts/Staggered.html 

    Specifically the last option, the multi-layered axis labels could make things more readable without taking up large amounts of vertical space on my UI... 

    Thanks

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 23 Jun 2015 Link to this post

    Hi John,

    In order to achieve multi-layered labels I would suggest to add a newline conditionally in the category.Axis.labels.template. For your convenience here is a basic example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 02 Sep 2015 Link to this post

    Hi there,

    I am looking to achieve multi-layered axis labels for the same reason, but the link to the above example isn't working.  Please can you make this available or provide a new example so I can achieve this for my chart.

    Thanks, Mark

  7. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 03 Sep 2015 in reply to Mark Link to this post

    Further to this, is it possible to switch off these labels altogether?  How can you achieve that?
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 04 Sep 2015 Link to this post

    Hi Mark,

    Here is the correct link - http://dojo.telerik.com/@Iliana/IkuSA. As for the switching off the labels, to achieve this you could set categoryAxis.labels.visible false.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 04 Sep 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    Thanks for your reply.  Apologies, I think I've been unclear - it's the value axis I think which needs the labels to be switched off.  Please see the issue in attached screenshot.  I can't see any options for the value axis to switch off the labels - please can you advise.

    Also, some of our charts take a few seconds to come back from the server.  Initially, the legend at the bottom just shows the unformatted template (see second attached screenshot) until the data comes back and it's all good.  Is there a way of hiding this until the actual data has been rendered?

     

    Thanks, Mark

  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Sep 2015 Link to this post

    Hi Mark,

    You could hide the valueAxis labels as set the valueAxis.labels.visible option to false. Take a look at this dojo.

    Regarding the second question, it is not directly related to the topic in this thread - please open a new conversation for it. Thank you in advance for your understanding and cooperation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 08 Sep 2015 in reply to Iliana Nikolova Link to this post

    Thanks Iliana,

    However, for me this option is not recognised.  Setting visible=false for labels on the categoryAxis is fine, but the same option is unrecognised when trying to apply to the valueAxis.  I've attached a screenshot of the code (so you can see the red underline I am referring to).  I am using the Kendo controls in MVC rather than creating the controls via javascript.

    I'm not entirely sure what version of Kendo controls I'm using - the JS is added via a bundle in the MVC bundleconfig.cs file as follows....

      bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                            "~/Scripts/kendo/kendo.all.min.js",
                                // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
                            "~/Scripts/kendo/kendo.aspnetmvc.min.js"));​

    I'll raise a ticket for the other issue.

    Thanks, Mark

  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Sep 2015 Link to this post

    Hi Mark,

    There is incorrect syntax in the provided picture - it should be: 
    //....
    .ValueAxis(axis => axis
       .Numeric()
       .Labels(l=>l.Visible(false))
    )

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2015 in reply to Iliana Nikolova Link to this post

    Thank you, working perfectly.

    Mark

  14. Peter
    Peter avatar
    7 posts
    Member since:
    Jan 2015

    Posted 21 Dec 2015 in reply to Iliana Nikolova Link to this post

    Hey Iliana, can you repost that basic example, the dojo doesn't seem to exist.

     

  15. Peter
    Peter avatar
    7 posts
    Member since:
    Jan 2015

    Posted 21 Dec 2015 in reply to Peter Link to this post

    can you repost the following:

    "In order to achieve multi-layered labels I would suggest to add a newline conditionally in the category.Axis.labels.template. For your convenience here is a basic example."

  16. Peter
    Peter avatar
    7 posts
    Member since:
    Jan 2015

    Posted 21 Dec 2015 Link to this post

    sorry ignore my request.  i can't seem to delete a post.
  17. Samir
    Samir avatar
    4 posts
    Member since:
    May 2016

    Posted 18 Aug in reply to Iliana Nikolova Link to this post

    Can you please show the demo at http://dojo.telerik.com/@Iliana/IkuSA using control written in MVC 

     @(Html.Kendo().Chart...

    I am also facing the same problem and need to implement the control in MVC and not in javascript

     

  18. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 22 Aug Link to this post

    Hi Samir,

    With the chart MVC wrapper you should use the same approach - custom JavaScript in the categoryAxis.labels.template. As an example: 
    //....
     .CategoryAxis(axis => axis
         //....
        .Labels(l=>l.Visible(true).Template("#= labelsTemplate(value, dataItem) #"))
    )
     
    <script>
    function labelsTemplate(value, dataItem) {
        var ds = $("#chart").data("kendoChart").dataSource;
          index = ds.indexOf(dataItem);
          label = index % 2 !== 0 ? " \n" : "";
     
        label += value;
        return label;
    }
    </script>




    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  19. Joe
    Joe avatar
    62 posts
    Member since:
    May 2012

    Posted 03 Nov Link to this post

    Sorry for necro-ing this post, but I'm dealing with long label names that are overlapping, and I tried implementing this, but it doesn't actually do anything. Is this still the preferred way of doing it?

    function labelTemplate(value, dataItem) {
            var ds = $("#chartWTDPayroll").data("kendoChart").dataSource;
            var index = ds.indexOf(dataItem);
            var label = index % 2 !== 0 ? " \n" : "";
     
            label += value;
            return label;
        }
    @(Html.Kendo().Chart<ClientWTDPayroll>()
        .Name("chartWTDPayroll")
        .Title("Top 10 Client WTD Payroll (Gross)")
        .Legend(l => l.Position(ChartLegendPosition.Bottom))
        .Series(s => {
            s.Column(m => m.WTDGross).Name("Gross").Color("#009933").Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd).Format("C"));
            s.Column(m => m.WTDNet).Name("Net").Color("#33cc33").Labels(l => l.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd).Format("C"));
        })
        .CategoryAxis(c => c
            .Categories(m => m.EmployerName)
            .Labels(l => l.Visible(true).Template("#= labelTemplate(value, dataItem) #"))
        )
        .DataSource(ds => { ds.Read(r => r.Action("ClientWTDPayroll", "Clients").Type(HttpVerbs.Get)); })
        .Tooltip(tp => tp.Visible(true).Template("#=category# - #=value#"))
    )

     

     

  20. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 07 Nov Link to this post

    Hi Joe,

    There should be "&nbsp;" in the label, however it appears the forum clears the non-breaking spaces. Take a look at the dojo example from my third post: 

    http://dojo.telerik.com/@Iliana/IkuSA


    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready