Resize kendo chart while minimizing browser window?

Question

In our team project, we use the KendoUI controls here, while minimizing the size of the window diagram without decreasing. How to increase / decrease the size of the chart, as well as maximize / minimize the browser window.?

Answer 1

Try it with me:

<div id="example"> <div id="chart"></div> </div> <script> // Chart Data Source var exampleData = [ { "FromDept": "ACT", "ToDept": "NSW", "Year": 2010, "Total": 101 }, { "FromDept": "ACT", "ToDept": "NSW", "Year": 2011, "Total": 1001 }, { "FromDept": "ACT", "ToDept": "NSW", "Year": 2012, "Total": 501 }, { "FromDept": "ACT", "ToDept": "YNT", "Year": 2010, "Total": 501 } ]; // Function to create Chart function createChart() { // Creating kendo chart using exampleData $("#chart").kendoChart({ title: { text: "Sample" }, dataSource: { data: exampleData, }, legend: { position: "bottom" }, chartArea: { background: "" }, seriesDefaults: { type: "line" }, series: [{ field: "Total", }], valueAxis: { labels: { format: "${0}" } }, categoryAxis: { field: "Year" }, tooltip: { visible: true, format: "{0}%" } }); } // Resize the chart whenever window is resized $(window).resize(function () { $("#chart svg").width(Number($(window).width())); $("#chart svg").height(Number($(window).height())); $("#chart").data("kendoChart").refresh(); }); // Document ready function $(document).ready(function () { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); // Initially $("#chart svg").width(Number($(window).width())); $("#chart svg").height(Number($(window).height())); $("#chart").data("kendoChart").refresh(); }); </script> 

Answer 2

Try it...

 $(window).resize(function () { $("#chart svg").width(Number($('.k-content').width())); $("#chart svg").height(Number($('.k-content').height())); $("#chart").data("kendoChart").refresh(); }); 

Answer 3

You can attach a window resizing event and, when changing it, reset the width parameter in the diagram.

 window.onresize = function () { var newWidth = window.innerWidth * .9 // 90% of screen width var chart = $("#chart").data("kendoChart"); // get chart widget chart.options.chartArea.width = newWidth; // set new width chart.redraw(); // redraw the chart }; 

Answer 4

Another point. You can also turn off the animation before redrawing and turn it on after

 $(window).resize(function () { $("#chart").data("kendoChart").options.transitions = false; $("#chart").data("kendoChart").refresh(); $("#chart").data("kendoChart").options.transitions = true; });