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

Question

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:

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? 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.date).Name("deneme")
        .Aggregate(ChartSeriesAggregate.Count);
    series
       .Column(model => model.digerdeneme, categoryExpression: model => model.date).Name("digerdeneme")
       .Aggregate(ChartSeriesAggregate.Count);

    series
      .Column(model => model.KapsamDisi, categoryExpression: model => model.date).Name("Kapsam Dışı Dosyalar")
      .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 #"))
)

Currently what are you getting when you have appended the code for label as shown in question — D_Learning, Jul 22 '14 at 09:23
Thank you for your reply. I am getting this: "C# unknown type of variables labels" — kojirosan, Jul 22 '14 at 09:28
Try changing the format from **"C"** to **"{0:C}"** and let me know if it works. Note: I assume you want to show the labels as Currency. — D_Learning, Jul 22 '14 at 09:34
nope. it did not work. i think, i am pasting the code wrong place because it gives me same error wherever i paste it. — kojirosan, Jul 22 '14 at 10:25
Can you give this a try -> **.SeriesDefaults(series => series.Label(lb=> lb.Format("{0:C}")))**, I am not sure as I havn't used charts recently so you might need to tweak a bit.. — D_Learning, Jul 22 '14 at 11:32

score 1 · Accepted Answer · answered Jul 22 '14 at 13:25

1

Please try below code in the label to resolve the issue:

.Labels(label => label.Visible(true)
                      .Format("{0:C0}")
                      .Position(ChartBarLabelsPosition.OutsideEnd))

answered Jul 22 '14 at 13:25

Nitin Mall

462
2
5

Thank you for your reply. I am getting this error(translate): CS1061: 'Kendo.Mvc.UI.Fluent.ChartBuilder does not contain a description for "Labels" and cant find a independent first variable 'Kendo.Mvc.UI.Fluent.ChartBuilder – kojirosan Jul 23 '14 at 06:39

score 1 · Answer 2 · answered Jul 23 '14 at 07:03

Here is the answer thank you @D_Learning and @Nitin Mall!

Here is the solution if someone needs it:

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

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

2 Answers2