Chart ValueAxis positioning

2 posts, 0 answers
  1. Marty
    Marty avatar
    22 posts
    Member since:
    Feb 2008

    Posted 21 Dec 2012 Link to this post

    Hi, wondering if there is a way to position the valueaxis labels to the right side of the chart.  I know you can mirror the labels, but I was wondering if we can position them on right side.  I can only find an API for mirror.
    thanks
    Marty

        @(Html.Kendo().Chart()
            .Name("chart")
            .Title("Trend (30 Days)")
            .HtmlAttributes(new { style = "height:240px;" })
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults
                .Line()
                .Stack(true)
                .Width(1)
                .MissingValues(ChartLineMissingValues.Interpolate)
                .Markers(false))
            .ValueAxis(v=>v.Numeric().Labels(l=>l.Mirror(true)))

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Dec 2012 Link to this post

    Hi Marty,

     Right alignment is achieved by using the axis crossing value setting. Here is a live demo: http://jsbin.com/iyiqec/1/edit

     Here is the equivalent razor code:

    @(Html.Kendo().Chart(Model)
        .Name("chart")
        .Title("Internet Users")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series => {
            series.Line(model => model.Value)
                .Name("United States")
                .Labels(labels => labels.Format("{0}%").Visible(true));
        })
        .CategoryAxis(axis => axis
          .AxisCrossingValue(5)
            .Categories(model => model.Year)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0}%"))
        )
    )

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top