Serial and y-axis data display value together in kendo UI tooltip template
I am using kendo ui diagram schema to display some data. I can display a column chart.
But I am worried if any body can help.
- I don't want ant gap between low voltage data table and high voltage data row
- How to display series and y-axis data values together in a tooltip template
I want him to be
Please find the attached images for your 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.
Thank!!
+3
source to share
1 answer
To avoid spaces, use the "spacing" option in the series
series: [{
spacing: 0,
}]
to show category value in tooltip use this # = category #
template: "#= series.name #: #= category # = #= value # "
I made a Jsfidle example so you can see it in action
http://jsfiddle.net/chanaka1/hy7uqu00/2/
Hope this helps.
+6
source to share