I am using kendo UI Bar chart to display some data. I am able to display the column chart..

But I have some concern If any body can help.

1. I don't want ant gap between low voltage data bar and high voltage data bar
2. How to display value of series and y axis data together in tooltip template

I want it to be

Please find attached images for reference..

My code:

title: {
},
legend: {
    position: "bottom"
},
seriesDefaults: {
    type: "column",
//stack: true
},
series: [{
    name: "# Low Voltage Service Points",
    data: [50, 23, 74, 20, 20, 10],
    color: "#1A5FED",

    // Line chart marker type
    markers: {
        type: "square"
    }
}, {
    name: "# High Voltage Service Points",
    data: [52, 34, 78, 68, 23, 40],
    color: "#ed3024",
}],
valueAxis: {
    line: {
        visible: false
    },
    labels: {
    //format: "{0}%"
    },
    axisCrossingValue: 0
},
categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    color: "#ff0000",
    majorGridLines: {
        visible: false
    },
    line: {
        visible: false
    },
    labels: {
        template: "#=categories[value]#"
    },
},
tooltip: {
    visible: true,
    format: "{0}",
    template: "#= series.name #: #= value #, Date"
}

My code is working fine..

Thanks!!

I am using kendo UI Bar chart to display some data. I am able to display the column chart..

But I have some concern If any body can help.

1. I don't want ant gap between low voltage data bar and high voltage data bar
2. How to display value of series and y axis data together in tooltip template

I want it to be

Please find attached images for reference..

My code:

title: {
},
legend: {
    position: "bottom"
},
seriesDefaults: {
    type: "column",
//stack: true
},
series: [{
    name: "# Low Voltage Service Points",
    data: [50, 23, 74, 20, 20, 10],
    color: "#1A5FED",

    // Line chart marker type
    markers: {
        type: "square"
    }
}, {
    name: "# High Voltage Service Points",
    data: [52, 34, 78, 68, 23, 40],
    color: "#ed3024",
}],
valueAxis: {
    line: {
        visible: false
    },
    labels: {
    //format: "{0}%"
    },
    axisCrossingValue: 0
},
categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    color: "#ff0000",
    majorGridLines: {
        visible: false
    },
    line: {
        visible: false
    },
    labels: {
        template: "#=categories[value]#"
    },
},
tooltip: {
    visible: true,
    format: "{0}",
    template: "#= series.name #: #= value #, Date"
}

My code is working fine..

Thanks!!

• javascript
• jquery
• kendo-ui

1 Answer 1

To avoid spaces use "spacing" parameter in the series

series: [{
        spacing: 0,
}]

to show the category value in the tooltip use this #= category #

 template: "#= series.name #: #= category # = #= value # "

I have Done a Jsfidle Example so you can see it in action

http://jsfiddle/chanaka1/hy7uqu00/2/

Hope this helps.