Axis labels not positioned at bottom when graph have negative values

[Nicklas]

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!

[Iliana Dyankova]

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

[Nicklas]

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

[Iliana Dyankova]

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

[Ian]

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();