How can i show labels top of the columns kendo bar chart?

[Gokhan]

i'm trying to show value labels at top of the my chart's columns. I use Kendo UI.I find this example but i havent done it.

It's example:
http://jsfiddle.net/8YnKv/31/


How can i show 100 and 20 values like in the example chart?

I have tried this code but i failed.

 .Labels(labels => labels
.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
)


Here is my chart code. What can i do?
How can i add this functionality?
Thanks for your help. 


@(Html.Kendo().Chart(Model.TarihVM)
.Name("chart")
.Title(title => title
.Text("my chart title")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Top))
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.EvrakTarih).Name("deneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.digerdeneme, categoryExpression: model => model.EvrakTarih).Name("digerdeneme")
.Aggregate(ChartSeriesAggregate.Count);

series
.Column(model => model.deneme2, categoryExpression: model => model.EvrakTarih).Name("deneme2")
.Aggregate(ChartSeriesAggregate.Count);

})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Months)


.MajorGridLines(lines => lines.Visible(true))
)
.Theme("metro")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #"))

[Iliana Dyankova]

Hi Gokhan,

By design the labels in Kendo UI Chart are part of the series / seriesDefaults and must be added in the series / seriesDefaults configuration. Please try the following and let me know if it helps: 

//....
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.EvrakTarih)
   .Name("deneme")
   .Aggregate(ChartSeriesAggregate.Count)
   .Labels(labels => labels.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
);

Regards,
Iliana Nikolova
Telerik

 

 

[Gokhan]

Hi Iliana,

Thank you very much for your help. It works like a charm. But i have another problem.

I dont want to show zero(0) values on my chart. I find this link:

http://www.telerik.com/forums/is-it-possible-to-conditionally-display-the-series-label-

but i failed with javascript code. I dont want 0 values on my chart. How  can i disable them? 

What's the trick with this code? Thanks again.

<script>function onDB(e) {  e.sender.options.series[0].labels.visible = function (point) {     if (point.value < 0) {        return false     }     else { return point.value}  }}</script>

[Iliana Dyankova]

Hi Gokhan,

The provided code snippet in the forum thread will hide the 0 values only in the first series. From the provided picture it appears there are 3 series and the 0 value is in the third one. Hence in order to achieve the desired outcome you should execute the same logic for all series. As an example: 

function hideLabels(point){
 if (point.value < 0) {
   return false
 }
 else {
   return point.value
 }
}

function onDB(e) {
   var series =  e.sender.options.series;
   for(i=0;i<series.length;i++){
      series[i].labels.visible = hideLabels
   }
}

Regards,
Iliana Nikolova
Telerik

 

 

[Gokhan]

Thank you Iliana. it looks good. & works great.

[ShareDocs]

I want to achieve exactly the same but with stacked bar.

how can i display the label with value above the stacked bar?

[Alex Hajigeorgieva]

Hi,

The Kendo UI Chart of column type stacked series displays the labels above the stacked column by default. 

 

https://dojo.telerik.com/@bubblemaster/aCIgeGat

The rest of the available options are listed here:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.position

Let us know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik