Completed
Last Updated:
23 Jan 2020 18:28
by ADMIN
Kalyan
Created on:
01 Jul 2014 17:16
Category:
Kendo UI for jQuery
Type:
Feature Request
NoteText on Chart Series does not show when the data point is at teh top or bottom of the chart
Put the below html in http://trykendoui.telerik.com/
You will see that for year 2006 the noteText is not visible.
Same problem when the data point is at the top of the chart.
Should have some option to have some margin to accommodate this.
Or better yet change the position of the notetext to top or bottom automatically.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/line-charts/notes">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
<script>
var grandSlam = [{
"year": "2003",
"win": 13,
"extremum": "MIN: 13",
"loss": 3
},{
"year": "2004",
"win": 22,
"loss": 10,
"extremum": "MIN: 1",
},{
"year": "2005",
"win": 24,
"loss": 2
},{
"year": "2006",
"win": 30,
"extremum": "MAX: 30",
"loss": 1
},{
"year": "2007",
"win": 26,
"loss": 1
},{
"year": "2008",
"win": 24,
"loss": 3
},{
"year": "2009",
"win": 26,
"loss": 2
},{
"year": "2010",
"win": 20,
"loss": 3
},{
"year": "2011",
"win": 20,
"loss": 4
},{
"year": "2012",
"win": 19,
"loss": 3
}];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: grandSlam
},
plotArea: {
background: "green",
margin: {
bottom: 10,
top: 10
},
padding: {
top: 500
}
},
title: {
text: "Roger Federer Grand Slam tournament performance"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line"
},
chartArea: {
border: {
width: 5
},
margin: {
top: 100
}
},
series: [{
field: "loss",
name: "Losses",
noteTextField: "extremum",
notes: {
label: {
position: "inside"
},
position: "bottom"
}
}],
valueAxis: {
line: {
visible: false
}
},
categoryAxis: {
field: "year",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
0 comments