I updated to the 2015.2.624 version of Kendo MVC yesterday and I noticed that in all of the demos the category axis labels will now automatically rotate to a 45 degree angle when the browser window reaches a small enough size. I updated all of my references in my project and did some testing and noticed that none of my chart labels rotate. Am I missing something? Below is my code and I've tried with and without the following scripts:
$(window).resize(resizeCharts);
function resizeCharts() {
$("#TopCampaignsChart").data("kendoChart").resize();
}
Alternative:
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
<div class="chart-wrapper">
@(Html.Kendo().Chart(Model)
.Name("TopCampaignsChart")
.Title("Stats for your most successful campaigns")
.Theme("Silver")
.ChartArea(area => area.Background("transparent"))
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.Series(series =>
{
series.Column(model => model.OpenRate).Name("Open Rate");
series.Column(model => model.UniqueOpenRate).Name("Unique Open Rate");
series.Column(model => model.ClickRate).Name("Click Rate");
series.Column(model => model.UniqueClickRate).Name("Unique Click Rate");
})
.CategoryAxis(axis => axis
.Categories(model => model.CampaignName)
.Labels(labels => labels.Visible(true))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}%"))
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}%")
)
.Events(events => events.AxisLabelClick("CampaignClick").SeriesClick("CampaignClick"))
)
</div>
2 Answers, 1 is accepted
In order to get this outcome, you should set categoryAxis.labels.rotation.angle "auto":
//.....CategoryAxis(axis => axis //.... .Labels(l=>l.Rotation("auto")))Regards,
Iliana Nikolova
Telerik
Rank 1