KendoUI - Chart data labels

Question

Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?

Thanks for any help.

Answer 1

You can use templates to format both labels and tooltips; see labels.template and tooltip.template.

Answer 2

The key is to reference the Property you want using dataItem ex:

dataItem.TotalDollars

template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"

The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.

DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):

[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]

**Chart Generation Code: **

function createChart() {
    $("#SubmissionSummaryByProgramChart").kendoChart({
        title: {
            text: "Breakdown by Program"
        },
        legend: {
            position: "right"
        },
        dataSource: {
            transport: {
                read: {
                    url: "GetFooData",
                    dataType: "json",
                    data: {
                        Year : 2014,
                        Quarter : 1,
                    }
                }
            }
        },
        series: [{
            type: "pie",
            field: "PercentageShare",
            categoryField: "ProgramName"
        }],
        tooltip: {
            visible: true,
            template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
        }
    });
};

$(document).ready(createChart);