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

Axis labels not positioned at bottom when graph have negative values

4 Answers 132 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Nicklas
Top achievements
Rank 1
Nicklas asked on 08 Aug 2013, 07:30 AM
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!

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 08 Aug 2013, 09:26 AM
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!
0
Nicklas
Top achievements
Rank 1
answered on 08 Aug 2013, 10:48 AM
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
0
Iliana Nikolova
Telerik team
answered on 09 Aug 2013, 02:53 PM
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!
0
Ian
Top achievements
Rank 2
answered on 23 Aug 2013, 10:40 PM
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();
Tags
Chart
Asked by
Nicklas
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Nicklas
Top achievements
Rank 1
Ian
Top achievements
Rank 2
Share this question
or