Home Forums Chart Support How i can resize the chart after the full screen expansion

How i can resize the chart after the full screen expansion

  • #24540
    <html>
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css ">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script >
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script >
        
        
        
        
        <title>Full_Screen</title>
        <style>
         
            .panel-actions {
      margin-top: -20px;
      margin-bottom: 0;
      text-align: right;
    }
    .panel-actions a {
      color:#333;
    }
    .panel-fullscreen {
        display: block;
        z-index: 9999;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        right:0px;
        left: 0px;
        bottom: 0;
        overflow: auto;
       
    }
        </style>
        </head>
    <body>
            <div class="container"  >
        <div class="row" >
            <div class="col-md-8" >
                <h2>Fullscreen toggle</h2>
                <div class="panel panel-default" >
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                        <ul class="list-inline panel-actions">
                            <li><a href="#" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                       
                         <div id="chartContainer1" style="height: 200px; width: 100%;"></div>
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <script>
           
          
            $(document).ready(function () {
        //Toggle fullscreen
        $("#panel-fullscreen").click(function (e) {
            document.getElementById("chartContainer1").style.width="100%";
             document.getElementById("chartContainer1").style.height="100%";
            
            
            e.preventDefault();
            
            var $this = $(this);
        
            if ($this.children(&apos;i&apos;).hasClass(&apos;glyphicon-resize-full&apos;))
            {
                $this.children(&apos;i&apos;).removeClass(&apos;glyphicon-resize-full&apos;);
                $this.children(&apos;i&apos;).addClass(&apos;glyphicon-resize-small&apos;);
            }
            else if ($this.children(&apos;i&apos;).hasClass(&apos;glyphicon-resize-small&apos;))
            {
                $this.children(&apos;i&apos;).removeClass(&apos;glyphicon-resize-small&apos;);
                $this.children(&apos;i&apos;).addClass(&apos;glyphicon-resize-full&apos;);
            }
            $(this).closest(&apos;.panel&apos;).toggleClass(&apos;panel-fullscreen&apos;);
             window.dispatchEvent(new Event(&apos;resize&apos;));
        });
    });
    
            window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer1", {
    	
      
    	axisX: {
    		valueFormatString: "MMM YYYY"
    	},
    
    	toolTip: {
    		shared: true
    	},
    	
    	
    	data: [{
    		type:"spline",
    		
    		name: "Zone 00",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [		
    			{ x: new Date(2014, 00, 01), y: 409 },
    			{ x: new Date(2014, 01, 01), y: 420},
    			{ x: new Date(2014, 02, 01), y: 450 },
    			{ x: new Date(2014, 03, 01), y: 300},
    			{ x: new Date(2014, 04, 01), y: 450},
    			{ x: new Date(2014, 05, 01), y: 470},
    			{ x: new Date(2014, 06, 01), y: 500 },
    			{ x: new Date(2014, 07, 01), y: 875 },
    			{ x: new Date(2014, 08, 01), y: 875 },
    			{ x: new Date(2014, 09, 01), y: 875 },
    			{ x: new Date(2014, 10, 01), y: 875 },
    			{ x: new Date(2014, 11, 01), y: 500 },
    			{ x: new Date(2015, 00, 01), y: 500 },
    			{ x: new Date(2015, 01, 01), y: 500 },
    			{ x: new Date(2015, 02, 01), y: 490 },
    			{ x: new Date(2015, 03, 01), y: 580},
    			{ x: new Date(2015, 04, 01), y: 580 },
    			{ x: new Date(2015, 05, 01), y: 1600},
    			{ x: new Date(2015, 06, 01), y: 1600 },
    			{ x: new Date(2015, 07, 01), y: 1600 },
    			{ x: new Date(2015, 08, 01), y: 1210 },
    			{ x: new Date(2015, 09, 01), y: 1210 },
    			{ x: new Date(2015, 10, 01), y: 1210 },
    			{ x: new Date(2015, 11, 01), y: 1750 },
    			{ x: new Date(2016, 00, 01), y: 1750},
    			{ x: new Date(2016, 01, 01), y: 1750 },
    			{ x: new Date(2016, 02, 01), y: 1750 },
    			{ x: new Date(2016, 03, 01), y: 1880 },
    			{ x: new Date(2016, 04, 01), y: 1890},
    			{ x: new Date(2016, 05, 01), y: 2000 },
    			{ x: new Date(2016, 06, 01), y: 2000 },
    			{ x: new Date(2016, 07, 01), y: 2100 },
    			{ x: new Date(2016, 08, 01), y: 2100 },
    			{ x: new Date(2016, 09, 01), y: 2100 },
    			{ x: new Date(2016, 10, 01), y: 2100 },
    			{ x: new Date(2016, 11, 01), y: 1300 },
    			{ x: new Date(2017, 00, 01), y: 2300 },
    			{ x: new Date(2017, 01, 01), y: 2300 },
    			{ x: new Date(2017, 02, 01), y: 2350 },
    			{ x: new Date(2017, 03, 01), y: 2350 },
    			{ x: new Date(2017, 04, 01), y: 2500 },
    			{ x: new Date(2017, 05, 01), y: 2500 }
    		]
    	},
      {
      type:"spline",
    		
    		name: "Zone 01",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [		
    			{ x: new Date(2014, 00, 01), y: 450 },
    			{ x: new Date(2014, 01, 01), y: 450},
    			{ x: new Date(2014, 02, 01), y: 450 },
    			{ x: new Date(2014, 03, 01), y: 300},
    			{ x: new Date(2014, 04, 01), y: 300},
    			{ x: new Date(2014, 05, 01), y: 300},
    			{ x: new Date(2014, 06, 01), y: 1000 },
    			{ x: new Date(2014, 07, 01), y: 1000},
    			{ x: new Date(2014, 08, 01), y: 1000 },
    			{ x: new Date(2014, 09, 01), y: 1200},
    			{ x: new Date(2014, 10, 01), y: 1200},
    			{ x: new Date(2014, 11, 01), y: 1220},
    			{ x: new Date(2015, 00, 01), y: 100 },
    			{ x: new Date(2015, 01, 01), y: 100 },
    			{ x: new Date(2015, 02, 01), y: 500 },
    			{ x: new Date(2015, 03, 01), y: 580},
    			{ x: new Date(2015, 04, 01), y: 580 },
    			{ x: new Date(2015, 05, 01), y: 950},
    			{ x: new Date(2015, 06, 01), y: 950 },
    			{ x: new Date(2015, 07, 01), y: 950 },
    			{ x: new Date(2015, 08, 01), y: 200 },
    			{ x: new Date(2015, 09, 01), y: 200 },
    			{ x: new Date(2015, 10, 01), y: 200 },
    			{ x: new Date(2015, 11, 01), y: 800 },
    			{ x: new Date(2016, 00, 01), y: 850},
    			{ x: new Date(2016, 01, 01), y: 850 },
    			{ x: new Date(2016, 02, 01), y: 850 },
    			{ x: new Date(2016, 03, 01), y: 1700 },
    			{ x: new Date(2016, 04, 01), y: 1700},
    			{ x: new Date(2016, 05, 01), y: 1700 },
    			{ x: new Date(2016, 06, 01), y: 1750 },
    			{ x: new Date(2016, 07, 01), y: 1750 },
    			{ x: new Date(2016, 08, 01), y: 1750 },
    			{ x: new Date(2016, 09, 01), y: 1600 },
    			{ x: new Date(2016, 10, 01), y: 1600 },
    			{ x: new Date(2016, 11, 01), y: 1600 },
    			{ x: new Date(2017, 00, 01), y: 1800 },
    			{ x: new Date(2017, 01, 01), y: 2000 },
    			{ x: new Date(2017, 02, 01), y: 2000 },
    			{ x: new Date(2017, 03, 01), y: 2350 },
    			{ x: new Date(2017, 04, 01), y: 2350 },
    			{ x: new Date(2017, 05, 01), y: 2350 }
    		]
    	},
    	{
    		type: "spline",
    	
    		name: "Zone 02",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [
    			{ x: new Date(2014, 00, 01), y: 410 },
    			{ x: new Date(2014, 01, 01), y: 500 },
    			{ x: new Date(2014, 02, 01), y: 600 },
    			{ x: new Date(2014, 03, 01), y: 1180 },
    			{ x: new Date(2014, 04, 01), y: 1000 },
    			{ x: new Date(2014, 05, 01), y: 1270 },
    			{ x: new Date(2014, 06, 01), y: 1300 },
    			{ x: new Date(2014, 07, 01), y: 1300 },
    			{ x: new Date(2014, 08, 01), y: 1358 },
    			{ x: new Date(2014, 09, 01), y: 1410 },
    			{ x: new Date(2014, 10, 01), y: 1480 },
    			{ x: new Date(2014, 11, 01), y: 1400 },
    			{ x: new Date(2015, 00, 01), y: 1400 },
    			{ x: new Date(2015, 01, 01), y: 1300 },
    			{ x: new Date(2015, 02, 01), y: 1300 },
    			{ x: new Date(2015, 03, 01), y: 1999 },
    			{ x: new Date(2015, 04, 01), y: 1999 },
    			{ x: new Date(2015, 05, 01), y: 800 },
    			{ x: new Date(2015, 06, 01), y: 1590 },
    			{ x: new Date(2015, 07, 01), y: 1620 },
    			{ x: new Date(2015, 08, 01), y: 1670 },
    			{ x: new Date(2015, 09, 01), y: 1720 },
    			{ x: new Date(2015, 10, 01), y: 1750 },
    			{ x: new Date(2015, 11, 01), y: 1820 },
    			{ x: new Date(2016, 00, 01), y: 2000 },
    			{ x: new Date(2016, 01, 01), y: 1920 },
    			{ x: new Date(2016, 02, 01), y: 1750 },
    			{ x: new Date(2016, 03, 01), y: 1850 },
    			{ x: new Date(2016, 04, 01), y: 1750 },
    			{ x: new Date(2016, 05, 01), y: 1750 },
    			{ x: new Date(2016, 06, 01), y: 1750 },
    			{ x: new Date(2016, 07, 01), y: 1750 },
    			{ x: new Date(2016, 08, 01), y: 1800 },
    			{ x: new Date(2016, 09, 01), y: 1800 },
    			{ x: new Date(2016, 10, 01), y: 1800 },
    			{ x: new Date(2016, 11, 01), y: 1850 },
    			{ x: new Date(2017, 00, 01), y: 1850 },
    			{ x: new Date(2017, 01, 01), y: 1900 },
    			{ x: new Date(2017, 02, 01), y: 1900 },
    			{ x: new Date(2017, 03, 01), y: 1900 },
    			{ x: new Date(2017, 04, 01), y: 2100 },
    			{ x: new Date(2017, 05, 01), y: 2100 }
    		]
    	},
    	{
    		type: "spline",
    		
        
    		name: "Zone 03",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [
    			{ x: new Date(2014, 00, 01), y: 409 },
    			{ x: new Date(2014, 01, 01), y: 500 },
    			{ x: new Date(2014, 02, 01), y: 500 },
    			{ x: new Date(2014, 03, 01), y: 500 },
    			{ x: new Date(2014, 04, 01), y: 500 },
    			{ x: new Date(2014, 05, 01), y: 1000},
    			{ x: new Date(2014, 06, 01), y: 1500 },
    			{ x: new Date(2014, 07, 01), y: 1500 },
    			{ x: new Date(2014, 08, 01), y: 1500 },
    			{ x: new Date(2014, 09, 01), y: 1450 },
    			{ x: new Date(2014, 10, 01), y: 1440 },
    			{ x: new Date(2014, 11, 01), y: 1429 },
    			{ x: new Date(2015, 00, 01), y: 1435 },
    			{ x: new Date(2015, 01, 01), y: 1450 },
    			{ x: new Date(2015, 02, 01), y: 900 },
    			{ x: new Date(2015, 03, 01), y: 900},
    			{ x: new Date(2015, 04, 01), y: 900 },
    			{ x: new Date(2015, 05, 01), y: 955 },
    			{ x: new Date(2015, 06, 01), y: 955 },
    			{ x: new Date(2015, 07, 01), y: 1200 },
    			{ x: new Date(2015, 08, 01), y: 1200 },
    			{ x: new Date(2015, 09, 01), y: 1200 },
    			{ x: new Date(2015, 10, 01), y: 1200 },
    			{ x: new Date(2015, 11, 01), y: 1200 },
    			{ x: new Date(2016, 00, 01), y: 1299 },
    			{ x: new Date(2016, 01, 01), y: 1299 },
    			{ x: new Date(2016, 02, 01), y: 1299 },
    			{ x: new Date(2016, 03, 01), y: 1350 },
    			{ x: new Date(2016, 04, 01), y: 1350 },
    			{ x: new Date(2016, 05, 01), y: 1350 },
    			{ x: new Date(2016, 06, 01), y: 1350 },
    			{ x: new Date(2016, 07, 01), y: 1400 },
    			{ x: new Date(2016, 08, 01), y: 1400 },
    			{ x: new Date(2016, 09, 01), y: 1600 },
    			{ x: new Date(2016, 10, 01), y: 1600 },
    			{ x: new Date(2016, 11, 01), y: 1600 },
    			{ x: new Date(2017, 00, 01), y: 1800 },
    			{ x: new Date(2017, 01, 01), y: 1800 },
    			{ x: new Date(2017, 02, 01), y: 1800},
    			{ x: new Date(2017, 03, 01), y: 2000 },
    			{ x: new Date(2017, 04, 01), y: 2000 },
    			{ x: new Date(2017, 05, 01), y: 2000 }
    		]
    	},
    	{
    		type: "spline",
    	
    		name: "Zone 04",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [
    			{ x: new Date(2014, 00, 01), y: 529 },
    			{ x: new Date(2014, 01, 01), y: 100 },
    			{ x: new Date(2014, 02, 01), y: 800},
    			{ x: new Date(2014, 03, 01), y: 800 },
    			{ x: new Date(2014, 04, 01), y: 400 },
    			{ x: new Date(2014, 05, 01), y: 1000 },
    			{ x: new Date(2014, 06, 01), y: 1000},
    			{ x: new Date(2014, 07, 01), y: 1000 },
    			{ x: new Date(2014, 08, 01), y: 1000},
    			{ x: new Date(2014, 09, 01), y: 579 },
    			{ x: new Date(2014, 10, 01), y: 1100 },
    			{ x: new Date(2014, 11, 01), y: 1100 },
    			{ x: new Date(2015, 00, 01), y: 1100 },
    			{ x: new Date(2015, 01, 01), y: 1200 },
    			{ x: new Date(2015, 02, 01), y: 1210 },
    			{ x: new Date(2015, 03, 01), y: 1220 },
    			{ x: new Date(2015, 04, 01), y: 1220 },
    			{ x: new Date(2015, 05, 01), y: 1215},
    			{ x: new Date(2015, 06, 01), y: 1000 },
    			{ x: new Date(2015, 07, 01), y: 1000 },
    			{ x: new Date(2015, 08, 01), y: 1000},
    			{ x: new Date(2015, 09, 01), y: 1000 },
    			{ x: new Date(2015, 10, 01), y: 1100 },
    			{ x: new Date(2015, 11, 01), y: 1100},
    			{ x: new Date(2016, 00, 01), y: 1110},
    			{ x: new Date(2016, 01, 01), y: 1110 },
    			{ x: new Date(2016, 02, 01), y: 1110},
    			{ x: new Date(2016, 03, 01), y: 1200 },
    			{ x: new Date(2016, 04, 01), y: 1300 },
    			{ x: new Date(2016, 05, 01), y: 1300 },
    			{ x: new Date(2016, 06, 01), y: 1300 },
    			{ x: new Date(2016, 07, 01), y: 1300 },
    			{ x: new Date(2016, 08, 01), y: 1300 },
    			{ x: new Date(2016, 09, 01), y: 1300 },
    			{ x: new Date(2016, 10, 01), y: 100},
    			{ x: new Date(2016, 11, 01), y: 100 },
    			{ x: new Date(2017, 00, 01), y: 100 },
    			{ x: new Date(2017, 01, 01), y: 1000 },
    			{ x: new Date(2017, 02, 01), y: 1000 },
    			{ x: new Date(2017, 03, 01), y: 1000 },
    			{ x: new Date(2017, 04, 01), y: 749 },
    			{ x: new Date(2017, 05, 01), y: 740 }
    		]
        },
        {
        type:"spline",
    		
    		name: "Zone 05",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [		
    			{ x: new Date(2014, 00, 01), y: 450 },
    			{ x: new Date(2014, 01, 01), y: 450},
    			{ x: new Date(2014, 02, 01), y: 450 },
    			{ x: new Date(2014, 03, 01), y: 300},
    			{ x: new Date(2014, 04, 01), y: 450},
    			{ x: new Date(2014, 05, 01), y: 500},
    			{ x: new Date(2014, 06, 01), y: 500 },
    			{ x: new Date(2014, 07, 01), y: 500 },
    			{ x: new Date(2014, 08, 01), y: 1000 },
    			{ x: new Date(2014, 09, 01), y: 1000},
    			{ x: new Date(2014, 10, 01), y: 1000},
    			{ x: new Date(2014, 11, 01), y: 1250 },
    			{ x: new Date(2015, 00, 01), y: 1250},
    			{ x: new Date(2015, 01, 01), y: 1250},
    			{ x: new Date(2015, 02, 01), y: 450 },
    			{ x: new Date(2015, 03, 01), y: 450},
    			{ x: new Date(2015, 04, 01), y: 150 },
    			{ x: new Date(2015, 05, 01), y: 150},
    			{ x: new Date(2015, 06, 01), y: 160 },
    			{ x: new Date(2015, 07, 01), y: 160 },
    			{ x: new Date(2015, 08, 01), y: 1210 },
    			{ x: new Date(2015, 09, 01), y: 1210 },
    			{ x: new Date(2015, 10, 01), y: 1210 },
    			{ x: new Date(2015, 11, 01), y: 1750 },
    			{ x: new Date(2016, 00, 01), y: 1750},
    			{ x: new Date(2016, 01, 01), y: 1750 },
    			{ x: new Date(2016, 02, 01), y: 1750 },
    			{ x: new Date(2016, 03, 01), y: 1880 },
    			{ x: new Date(2016, 04, 01), y: 1890},
    			{ x: new Date(2016, 05, 01), y: 2000 },
    			{ x: new Date(2016, 06, 01), y: 2000 },
    			{ x: new Date(2016, 07, 01), y: 2100 },
    			{ x: new Date(2016, 08, 01), y: 2100 },
    			{ x: new Date(2016, 09, 01), y: 2100 },
    			{ x: new Date(2016, 10, 01), y: 2100 },
    			{ x: new Date(2016, 11, 01), y: 1300 },
    			{ x: new Date(2017, 00, 01), y: 2300 },
    			{ x: new Date(2017, 01, 01), y: 2300 },
    			{ x: new Date(2017, 02, 01), y: 2350 },
    			{ x: new Date(2017, 03, 01), y: 2350 },
    			{ x: new Date(2017, 04, 01), y: 2500 },
    			{ x: new Date(2017, 05, 01), y: 2500 }
    		]
    },
    {
    type:"spline",
    		
    		name: "Zone 06",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [		
    			{ x: new Date(2014, 00, 01), y: 409 },
    			{ x: new Date(2014, 01, 01), y: 420},
    			{ x: new Date(2014, 02, 01), y: 450 },
    			{ x: new Date(2014, 03, 01), y: 300},
    			{ x: new Date(2014, 04, 01), y: 450},
    			{ x: new Date(2014, 05, 01), y: 470},
    			{ x: new Date(2014, 06, 01), y: 500 },
    			{ x: new Date(2014, 07, 01), y: 875 },
    			{ x: new Date(2014, 08, 01), y: 875 },
    			{ x: new Date(2014, 09, 01), y: 875 },
    			{ x: new Date(2014, 10, 01), y: 875 },
    			{ x: new Date(2014, 11, 01), y: 500 },
    			{ x: new Date(2015, 00, 01), y: 500 },
    			{ x: new Date(2015, 01, 01), y: 500 },
    			{ x: new Date(2015, 02, 01), y: 490 },
    			{ x: new Date(2015, 03, 01), y: 580},
    			{ x: new Date(2015, 04, 01), y: 580 },
    			{ x: new Date(2015, 05, 01), y: 1600},
    			{ x: new Date(2015, 06, 01), y: 1600 },
    			{ x: new Date(2015, 07, 01), y: 1600 },
    			{ x: new Date(2015, 08, 01), y: 1210 },
    			{ x: new Date(2015, 09, 01), y: 1210 },
    			{ x: new Date(2015, 10, 01), y: 1210 },
    			{ x: new Date(2015, 11, 01), y: 1750 },
    			{ x: new Date(2016, 00, 01), y: 1750},
    			{ x: new Date(2016, 01, 01), y: 1750 },
    			{ x: new Date(2016, 02, 01), y: 1750 },
    			{ x: new Date(2016, 03, 01), y: 1600 },
    			{ x: new Date(2016, 04, 01), y: 1600},
    			{ x: new Date(2016, 05, 01), y: 1600 },
    			{ x: new Date(2016, 06, 01), y: 2000 },
    			{ x: new Date(2016, 07, 01), y: 2000 },
    			{ x: new Date(2016, 08, 01), y: 2000 },
    			{ x: new Date(2016, 09, 01), y: 2100 },
    			{ x: new Date(2016, 10, 01), y: 2100 },
    			{ x: new Date(2016, 11, 01), y: 1300 },
    			{ x: new Date(2017, 00, 01), y: 2300 },
    			{ x: new Date(2017, 01, 01), y: 2300 },
    			{ x: new Date(2017, 02, 01), y: 2350 },
    			{ x: new Date(2017, 03, 01), y: 2350 },
    			{ x: new Date(2017, 04, 01), y: 2500 },
    			{ x: new Date(2017, 05, 01), y: 2500 }
    		]
    },
    {
    type:"spline",
    		
    		name: "Zone 07",
    		showInLegend: true,
    		markerSize: 0,
    		yValueFormatString: "$#,###k",
    		dataPoints: [		
    			{ x: new Date(2014, 00, 01), y: 409 },
    			{ x: new Date(2014, 01, 01), y: 420},
    			{ x: new Date(2014, 02, 01), y: 450 },
    			{ x: new Date(2014, 03, 01), y: 300},
    			{ x: new Date(2014, 04, 01), y: 450},
    			{ x: new Date(2014, 05, 01), y: 470},
    			{ x: new Date(2014, 06, 01), y: 500 },
    			{ x: new Date(2014, 07, 01), y: 875 },
    			{ x: new Date(2014, 08, 01), y: 875 },
    			{ x: new Date(2014, 09, 01), y: 875 },
    			{ x: new Date(2014, 10, 01), y: 875 },
    			{ x: new Date(2014, 11, 01), y: 500 },
    			{ x: new Date(2015, 00, 01), y: 500 },
    			{ x: new Date(2015, 01, 01), y: 500 },
    			{ x: new Date(2015, 02, 01), y: 490 },
    			{ x: new Date(2015, 03, 01), y: 580},
    			{ x: new Date(2015, 04, 01), y: 580 },
    			{ x: new Date(2015, 05, 01), y: 1600},
    			{ x: new Date(2015, 06, 01), y: 1600 },
    			{ x: new Date(2015, 07, 01), y: 1600 },
    			{ x: new Date(2015, 08, 01), y: 1210 },
    			{ x: new Date(2015, 09, 01), y: 1210 },
    			{ x: new Date(2015, 10, 01), y: 1210 },
    			{ x: new Date(2015, 11, 01), y: 1750 },
    			{ x: new Date(2016, 00, 01), y: 1750},
    			{ x: new Date(2016, 01, 01), y: 1750 },
    			{ x: new Date(2016, 02, 01), y: 1750 },
    			{ x: new Date(2016, 03, 01), y: 500 },
    			{ x: new Date(2016, 04, 01), y: 500},
    			{ x: new Date(2016, 05, 01), y: 500 },
    			{ x: new Date(2016, 06, 01), y: 400 },
    			{ x: new Date(2016, 07, 01), y: 400 },
    			{ x: new Date(2016, 08, 01), y: 800 },
    			{ x: new Date(2016, 09, 01), y: 800 },
    			{ x: new Date(2016, 10, 01), y: 800 },
    			{ x: new Date(2016, 11, 01), y: 850 },
    			{ x: new Date(2017, 00, 01), y: 850 },
    			{ x: new Date(2017, 01, 01), y: 850 },
    			{ x: new Date(2017, 02, 01), y: 900 },
    			{ x: new Date(2017, 03, 01), y: 900 },
    			{ x: new Date(2017, 04, 01), y: 950 },
    			{ x: new Date(2017, 05, 01), y: 950 }
    		]
    	
    	}]
    });
    chart.render();
    
    function toogleDataSeries(e){
    	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    		e.dataSeries.visible = false;
    	} else{
    		e.dataSeries.visible = true;
    	}
    	chart.render();
    }
            }
        </script>
        </body>
        
    
    
    
    </html>
    #24549

    @devikagopakumar,

    You can resize the chart by changing the height of the chart on resizing the panel as shown in this JSFiddle.

    For faster response, fork out our template jsfiddle reproducing the issue you are facing. Having a jsfiddle helps us in figuring out the issue and many a times we can just edit your code on jsfiddle to fix the issue right-away. Please refer this thread for more info.


    Vishwas R
    Team CanvasJS

    #24602

    Thank you very much for your support

You must be logged in to reply to this topic.