Mark Mark - 1 month ago 11
ASP.NET (C#) Question

Kendo UI Data Vis - Bar Chart - Min/Max Y-Axis Value

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.

enter image description here

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>

Answer

Just add the "max: 15, min:-15" to your valueAxis. here is your example with the limits

http://trykendoui.telerik.com/EgOs