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

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

6 Answers 1104 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gokhan
Top achievements
Rank 1
Gokhan asked on 22 Jul 2014, 08:28 AM
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 #"))

6 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 22 Jul 2014, 03:56 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gokhan
Top achievements
Rank 1
answered on 23 Jul 2014, 06:54 AM
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>





0
Accepted
Iliana Dyankova
Telerik team
answered on 23 Jul 2014, 04:14 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gokhan
Top achievements
Rank 1
answered on 24 Jul 2014, 06:52 AM
Thank you Iliana. it looks good. & works great.
0
ShareDocs
Top achievements
Rank 1
answered on 29 Oct 2019, 10:50 AM

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

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

0
Alex Hajigeorgieva
Telerik team
answered on 31 Oct 2019, 09:16 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Gokhan
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Gokhan
Top achievements
Rank 1
ShareDocs
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or