You must be logged in to post your query.
Home › Forums › Chart Support › My chart doesn't expand inside a div tag so a scroll bar is created
So I render a chart inside a partial view. Instead of the partial view filling out the space on the main page, a scroll bar is created instead and the partial view doesn’t expand… I’m not sure how to describe my problem fully so I posted a pic.
console.log('test'); function getFun() { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", animationEnabled: true, title: { text: "Simple Column Chart in ASP.NET MVC" }, subtitles: [ { text: "Try Resizing the Browser" } ], data: [ { type: "column", //change type to bar, line, area, pie, etc dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14 } ] //Uncomment below line to add data coming from the controller. } ] }); chart.render(); }
@{ } <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript">getFun();</script> <div id="chartContainer"> </div>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title MM-3</title> <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /> @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/unobtrusive") @model IEnumerable<RoboticUI.Models.ResultantRead> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script> <script src="~/Scripts/AutocompleteScript.js"></script> <script src="~/Scripts/chartJsTrial.js"></script> <link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" /> </head> <body style="font-family:Verdana;"> <div class="container"> <header> <div class="headerContent"> <p>Robot Gallery</p> </div> </header> <div class="menu-content" style="overflow:auto"> <div class="menu"> <p>@Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p> <p>@Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p> <p>@Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p> </div> <div id="navResult" class="main"> <h2 id="cc">Lorum Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </div> <footer>Copyright © MMM</footer> </div> @RenderBody() </body> </html>
header, footer { background-color: #68bbff; height: 5%; text-align: center; } div.headerContent p{ display:inline-block; } div.headerContent p.CompanySearchBar{ float:right; } div.container { width: 100%; height: 100%; padding-left: 0px; padding-right: 0px; } .menu { float: left; width: 5%; text-align: center; } .menu-content { padding-bottom: .2em; } .menu a { border: 2px solid #4CAF50; border-radius: 15px 100px; text-align: center; font-size: 12px; display:block; padding:20px; } .menu a:hover{ background-color:#4CAF50; } .main { float: left; width: 95%; padding: 0 20px; } @media only screen and (max-width:620px) { /* For mobile phones: */ .menu, .main, .right { width: 100%; } }
I’m not really sure if the .css is ruining my page. Or if it’s the actual chart it self that ruins the responsive style website.
@mmm333,
Can you please create a sample project and share it with us so that we can look into the code and help you out.
___________ Indranil Deo, Team CanvasJS
You must be logged in to reply to this topic. Login/Register