Kendo UI Data Vis - Bar Chart - Min/Max Y-Axis Value
Question
I'm using Kendo UI's bar chart for some data-visualizations.
I'm trying to set a max value for the y axis, does anyone know how I could implement this?
Currently, the values appear to be generated based on the value in my graph, but my data needs to have a max and min value of 15.
Here is what is being generated.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
<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>
<style>
#dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
<div id="example">
<div class="demo-section k-content">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "What should I call this graph"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "XX",
data: [13.907]
}, {
name: "XX",
data: [-4.743]
}, {
name: "XX",
data: [-7.210]
},{
name: "XX",
data: [9.988]
}],
valueAxis: {
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2013],
line: {
visible: false
},
labels: {
padding: {top: 165}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
3 answers
solution1
2 ACCPTED 2014-06-02 16:56:06
Just add the "max: 15, min:-15" to your valueAxis. here is your example with the limits
http://trykendoui.telerik.com/EgOs
solution2
1 2014-06-02 16:56:32
And to answer my own question...
I added modified the following code: valueAxis: { min: -15, // added this line max: 15, // added this line labels: { format: "#.#" }, line: { visible: false }, axisCrossingValue: 0 },
solution3
0 2016-10-26 10:01:16
valueAxis: { max: MaxValue, }
//MaxValue is variable which contain your maximum value
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.