New to Kendo UI for jQuery? Download free 30-day trial

Adjust the Chart Height Dynamically


Product Progress Kendo UI Chart
Operating System All
Browser All
Preferred Language JavaScript


How can I render a Bar Chart without previously knowing the number of bars for its final display?


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:

  1. Multiply the number of elements in the data by the desired amount of pixels.

  2. Use the jQuery css method.

        <div id="chart"></div>
        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);

                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).bind("kendo:skinChange", createChart);

For the full implementation of the approach, refer to this Dojo example.

See Also

In this article
Not finding the help you need? Improve this article