draw charts when the browser window is loaded or resized - Javascript highcharts

Javascript examples for highcharts:Custom Draw

  1. HOME
  2. Javascript
  3. highcharts
  4. Custom Draw

Description

draw charts when the browser window is loaded or resized

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  ww  w.j a v  a2  s.c o  m*/
var thisChartOptions = {
      chart: {
          type: 'line'
    },
    yAxis: [
       {
         title: {
          text: `%`
        },
        opposite: false,
        endOnTick: true,
        startOnTick: true,
        showLastLabel: true,
        labels: {
          format: "{value: .2f}"
        }
      },
      {
         title: {
          text: `%`
        },
        opposite: true,
        endOnTick: true,
        startOnTick: true,
        showLastLabel: true,
        labels: {
          format: "{value: .2f}"
        }
      }
    ],
    legend: {
            enabled: true,
            useHTML: true,
            labelFormatter: function() {
               return this.name + `(locationName)`;
            },
            maxHeight: 1000,
            itemStyle: {
               textOverflow: 'clip'
            }
         },
    series: [{
          name: 'Veryyyyyyyyyyyyyyyyy long tiiiiiiiitle',
        data: [{
              y: 39,
            x: 0
        },
        {
              y: 40,
            x: 1
        },
        {
              y: 41,
            x: 2
        }]
    }, {
          name: 'Veryyyyyyyyyyyyyyyyy long tiiiiiiiitle2',
          data: [{
              y: 60,
            x: 0
        },
        {
              y: 61,
            x: 1
        },
        {
              y: 62,
            x: 2
        }],
        yAxis: 1
    }, {
          name: 'Veryyyyyyyyyyyyyyyyy long tiiiiiiiitle3',
          data: [{
              y: 110,
            x: 0
        },
        {
              y: 111,
            x: 1
        },{
              y: 112,
            x: 2
        }],
        yAxis: 1
    }]
};
   $(window).on('resize', function() {
     Highcharts.chart('container', thisChartOptions);
   }).resize();
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials