Responsive Label Rotation

3 posts, 1 answers
  1. Kat
    Kat avatar
    3 posts
    Member since:
    Mar 2014

    Posted 30 Jun 2015 Link to this post

    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. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 02 Jul 2015 Link to this post

    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!
     
  3. Kat
    Kat avatar
    3 posts
    Member since:
    Mar 2014

    Posted 06 Jul 2015 in reply to Iliana Nikolova Link to this post

    This did the trick. Thanks.
Back to Top