kendo bar chart- add text at the top of the bar

Question

Can there be a some text displayed at the top of each bars in the bar chart? I need some text other than the bar values to be displayed.

currently there are bar values displayed at the top of each bar. How can i add one more value along with the bar value to be displayed?

Fiddle link: http://jsfiddle.net/An59E/34/

Here is the HTML code:

<div id="chart1">
</div>
<div id="chart2">
</div>

JS code:

var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];

$("#chart1").kendoChart({
  series: 
    [
        {
            data: series1,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            spacing: 0
        },                 
        {    
            data: series2, 
            color: "#CCCCCC"    
        }
    ],
    plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300
    },
    categoryAxis: 
    {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#CCCCCC"},
            ],
                },
                seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },

        }, 
    valueAxis:
                { 

            title:
            { 
                text: "A"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            format: "{0}"
        }
});  

        $("#chart2").kendoChart({
  series: 
    [
        {
            data: series3,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            spacing: 0
        },                 
        {    
            data: series4, 
            color: "#CCCCCC"    
        }
    ],
        plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300,
    },
    categoryAxis: 
            {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#333333"},
            ],
        },
    seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },
        }, 
    valueAxis: 
        { 
            title:
            { 
                text: "O"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            format: "{0}"
        }
});

Thanks.

Jaimin Jaimin · Accepted Answer · 2014-06-05T10:12:25

Try like this,

If i understand your question correctly,

seriesDefaults: 
{
 type: "column",
  labels: 
   {    
    visible: true,
    color: "red",
    template: "Jaimin: #= value #"
   },

 },

Demo: http://jsfiddle.net/An59E/37/

Let me know if any concern.

kendo bar chart- add text at the top of the bar

2 Answers