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

Bar chart category axis labels overlapping when their text is long

18 Answers 885 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Arpit
Top achievements
Rank 1
Arpit asked on 02 Dec 2013, 01:14 PM
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

18 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 04 Dec 2013, 08:26 AM
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!
0
John
Top achievements
Rank 1
answered on 19 Jun 2015, 01:20 PM

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

0
Iliana Nikolova
Telerik team
answered on 23 Jun 2015, 07:52 AM
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!
 
0
Mark
Top achievements
Rank 1
answered on 02 Sep 2015, 04:00 PM

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

0
Mark
Top achievements
Rank 1
answered on 03 Sep 2015, 08:23 AM
Further to this, is it possible to switch off these labels altogether?  How can you achieve that?
0
Iliana Nikolova
Telerik team
answered on 04 Sep 2015, 08:37 AM
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!
 
0
Mark
Top achievements
Rank 1
answered on 04 Sep 2015, 11:34 AM

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

0
Iliana Nikolova
Telerik team
answered on 08 Sep 2015, 08:19 AM
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!
 
0
Mark
Top achievements
Rank 1
answered on 08 Sep 2015, 09:11 AM

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

0
Iliana Nikolova
Telerik team
answered on 09 Sep 2015, 03:06 PM
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!
 
0
Mark
Top achievements
Rank 1
answered on 09 Sep 2015, 03:19 PM

Thank you, working perfectly.

Mark

0
Peter
Top achievements
Rank 1
answered on 21 Dec 2015, 09:53 PM

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

 

0
Peter
Top achievements
Rank 1
answered on 21 Dec 2015, 09:56 PM

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."

0
Peter
Top achievements
Rank 1
answered on 21 Dec 2015, 10:26 PM
sorry ignore my request.  i can't seem to delete a post.
0
Samir
Top achievements
Rank 2
answered on 18 Aug 2016, 09:04 AM

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

 

0
Iliana Nikolova
Telerik team
answered on 22 Aug 2016, 07:22 AM
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.
 
0
Joe
Top achievements
Rank 1
answered on 03 Nov 2016, 08:33 PM

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#"))
)

 

 

0
Iliana Nikolova
Telerik team
answered on 07 Nov 2016, 10:22 AM
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.
 
Tags
Charts
Asked by
Arpit
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
John
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Samir
Top achievements
Rank 2
Joe
Top achievements
Rank 1
Share this question
or