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 2488 Views

Charts

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

18 Answers, 1 is accepted

answered on 04 Sep 2015, 11:34 AM

labels.png

preload.png

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

answered on 08 Sep 2015, 09:11 AM

valueaxis_labels.png

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

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.

answered on 03 Nov 2016, 08:33 PM

gridlabels.png

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

)