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

Responsive Label Rotation

2 Answers 138 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kat
Top achievements
Rank 1
Kat asked on 30 Jun 2015, 07:08 PM

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

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 02 Jul 2015, 01:19 PM
Hi Kat,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kat
Top achievements
Rank 1
answered on 06 Jul 2015, 03:29 PM
This did the trick. Thanks.
Tags
Charts
Asked by
Kat
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Kat
Top achievements
Rank 1
Share this question
or