set width of chart - Javascript highcharts

Javascript examples for highcharts:Width

  1. HOME
  2. Javascript
  3. highcharts
  4. Width

Description

set width of chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

.chart-wrapper {//from  w  ww .  j a va 2 s  . c  o  m
   position: relative;
   padding-bottom: 40%;
   width:45%;
   float:left;
}
.chart-inner {
   position: absolute;
   width: 50%; height: 100%;
}


      </style> 
      <script type="text/javascript">
$(function() {
    var chart = [],
        data = [],
        data1 = [];
    $(document).ready(function() {
        addChart('container1','abc');
        addChart('container2','def');
        addChart('container3','ghi');
    });
    var time = (new Date()).getTime();
    function newRandomData(n, sign) {
        // generate an array of random data
        var data = [],
            i;
        for (i = -1 * n; i <= 0; i++) {
            data.push([time + i * 3600 * 1000, sign * Math.random() * 512]);
        }
        return data;
    }
    function addChart(id,title) {
        chart.push(new Highcharts.Chart({
           chart: {
            renderTo: id,
            zoomType: 'x',
            type: 'area'
        },
           title:{
                text:title
            },
             rangeSelector: {
            selected: 4
        },
            xAxis:{
                type:'datetime'
            },
        yAxis: {
            labels: {
                formatter: function() {
                    return Math.abs(this.value) + 'Points';
                }
            }
        },
        tooltip: {
            valueSuffix: ' Points',
            useHTML: true,
             shared:true,
            formatter: function() {
                var tooltip = '<span style="font-size:10px;">' + Highcharts.dateFormat('%A, %b %e %Y', this.x) + '</span><br/>';
                $.each(this.points, function(i,e) {
                    tooltip += '<span style=" color:'+this.series.color+'">'+this.series.name+':  </span><b>'+Highcharts.numberFormat(Math.abs(this.point.y),2)+' Points</b><br/>';
                });
                return tooltip;
            }
        },
 series: [
            {
            data: newRandomData(10, 1),
            name: 'Blue'},
        {
            data: newRandomData(10, -1),
            name: 'Red'}
        ]
        })
        );
    }
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div class="chart-wrapper">
         <div class="chart-inner"> 
            <div id="container1" style="width:100%; height: 100%;"></div>
         </div>
      </div> 
      <div class="chart-wrapper">
         <div class="chart-inner"> 
            <div id="container2" style="width:100%; height: 100%;"></div>
         </div>
      </div> 
      <div class="chart-wrapper">
         <div class="chart-inner"> 
            <div id="container3" style="width:100%; height: 100%;"></div>
         </div>
      </div>  
   </body>
</html>

Related Tutorials