New to Kendo UI for jQuery? Start a free 30-day trial
Adjust the Chart Height Dynamically
Updated on Dec 10, 2025
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | All |
| Browser | All |
| Preferred Language | JavaScript |
Description
How can I render a Bar Chart without previously knowing the number of bars for its final display?
Solution
In such scenarios, it is helpful to adjust the size of the Chart depending on the number of series it contains.
To adjust the height of the Chart container:
-
Multiply the number of elements in the data by the desired amount of pixels.
-
Use the jQuery
cssmethod.
<div>
<div id="chart"></div>
</div>
<script>
function createChart() {
/* Set chart container height */
var data = [560, 630, 740, 910, 1170, 1380,100, 150, 100, 100, 300];
var chartHeight = data.length * 50;
$("#chart").css("height", chartHeight);
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
data: data,
tooltip: {
position: "inside"
}
}],
valueAxis: {
max: 1400,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= value #",
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>For the full implementation of the approach, refer to this Dojo example.