Axis labels not positioned at bottom when graph have negative values

5 posts, 0 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2013 Link to this post

    Hi,

    As a part of a report I have a chart that displays both negative and positive values (see attachment), which seems to work fine :) However, I need to place the axis labels at the bottom, and not in the center (0) as they are right now. I came across an older post saying that this was not possible at that time (around mid to late 2012), but I was hoping this was sorted by now?

    Here's my chart code:
    @(Html.Kendo().Chart()
          .Name("chart")
          .Theme("silver")
          .Legend(legend => legend.Visible(false))
          .ChartArea(chartArea => chartArea
                                      .Background("transparent")
          )
          .Series(series =>
              {
                  series.Area(@Model.Weight).Name("Weight");
              })
          .ValueAxis(axis => axis
                                 .Numeric("depth")
                                 .Labels(labels => labels.Format("{0}kN"))
                                 .AxisCrossingValue(0)
                                 .Line(line => line.Visible(false))
                                  
          )
          .CategoryAxis(axis => axis
                                    .AxisCrossingValue(0,0,0,10)
                                    .Categories(@Model.Depth)
                                    .MajorGridLines(lines => lines.Visible(true))
          )
          .Tooltip(tooltip => tooltip
                                  .Visible(true)
                                  .Format("{0}%")
                                  .Template("#= series.name #: #= value #")
          )
          )
    If this is still not supported, I'd greatly appreciate a possible workaround as this is much needed functionality :)
    Thanks in advance!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 08 Aug 2013 Link to this post

    Hello Nicklas,

    In order to achieve this you should set categoryAxis.labels.padding. For working example take a look at this online demo

    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. UI for ASP.NET MVC is VS 2017 Ready
  4. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 08 Aug 2013 Link to this post

    Hi Iliana,

    Thanks for your quick feedback. Your suggested solution works with that particular example, but as soon as the values generated in the graph are all negative the padding is way off :/ See attached image

    Regards,
    Nicklas
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Aug 2013 Link to this post

    Hi Nicklas, 

    I am sorry to hear the suggested solution does not fit your requirements, however I am afraid currently there is no a better workaround. What I can suggest you is adjusting the categoryAxis.labels.padding in Chart dataBound event via the chart.options:

    @(Html.Kendo().Chart(Model)
      .Name("chart")
      //...
      .Events(ev=>ev.DataBound("adjustLabels"))       
    )
     
    <script>
    function adjustLabels() {
      //get reference to the Chart widget 
      var chart = $("#chart").data("kendoChart");
      //set categoryAxis.labels.padding
      chart.options.categoryAxis.labels.padding = 0
    }
    </script>
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 23 Aug 2013 Link to this post

    Here's how I did it in Kendo via MVC:

                                  Html.Kendo().Chart<AccountPerformance>(Model.Results)
                                                    .Name("chartPCTAvgAnnual_" + chartId)
                                                    .Title("% Return")
                                                    .Legend(legend => legend.Visible(false))
                                                    .Series(series =>
                                                        series.Column(model => model.Metrics.Return)
                                                        .Name(Model.ColumnTitle)
                                                        .Labels(false)
                                                    )

                                                    //Ading an extra axis lets us put the lables on bottom       
                                                    .ValueAxis(axis => axis.Numeric()
                                                           .AxisCrossingValue(0, int.MinValue))
                                                    .CategoryAxis(axis => axis
                                                           .Labels(false))
                                                    .CategoryAxis(axis => axis
                                                            .Categories(model => model.ObservationDescription)
                                                            .Labels(builder => builder.Rotation(45))
                                                            .Line(line => line.Visible(false))
                                                        )                                                    
                                                        
                                                        
                                                     .SeriesDefaults(builder => builder.Column().NegativeColor("#BE2D55").Color("#C0BD7F"))
                                                    .Tooltip(tooltip => tooltip
                                                        .Visible(true)
                                                        .Color("white")
                                                        .Background("black")
                                                        .Format("{0:P2}")
                                                        .Template("#= value #")
                                                    )                                                         
                                                    .Render();
Back to Top
UI for ASP.NET MVC is VS 2017 Ready