CODEWITHSUNDEEP
asp.netasp.net-mvcbootstrap-modalbootstrap-4
rickyProgrammer
rickyProgrammer

Reputation: 1167

Auto Adjust Size of Modal Content in Bootstrap Modal

i am new to ASP.net MVC and Bootstrap. I am using this graph from chart.js as reference. https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/

I was able to use the link to put the modal content inside a modal. However, there are unusual behavior that is happening upon modal pop up showing the graph. The graph does not auto-adjust in the modal size, UP UNTIL i minimize the browser and maximize.

upon first load, here's the image

enter image description here

after I minimize and maximize the browser, it is back to its usual form, as it auto adjusts in the modal size

enter image description here

here's the code

_partialView.cshtml

      <div id="chartContainer" > </div>



<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">

    //function doFunction() {
        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 }
                ]
            }
            ]
        });
        chart.render();
    //};
</script>

Upvotes: 2

Views: 1047

Answers (1)

rickyProgrammer
rickyProgrammer

Reputation: 1167

I found a workaround to this problem with Canvas Chart.js.

Based on this similar question, the author or developer has addressed the problem and give this solution https://canvasjs.com/forums/topic/charts-arent-full-size-until-page-is-refreshed/

This might help you, if you wish to use this plug-in in your future work.

Just put this line of codes that acts as basically creating the charts after a couple of seconds of delay after the page load event

var chart = null;
setTimeout(function(){

chart = [create chart here]
chart.render();

},3000);

So the modal will pop-up, and the chart will be displayed with a little delay based on the seconds you input

Upvotes: 1

Related Questions