column chart extends off container - Javascript highcharts

Javascript examples for highcharts:Column Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Column Chart

Description

column chart extends off container

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from   w w  w.  j  a  v  a2 s .  c o m
const seriesData = [
   {
     data: [[1512086400000, 36.95]],
    maxPointWidth: 100,
    name: 'Alex',
    _colorIndex: 0
  },
  {
     data: [[1509494400000, 12.99]],
    maxPointWidth: 100,
    name: 'Susan',
    _colorIndex: 1
  }
]
Highcharts.setOptions({
    global: {
      timezoneOffset: new Date().getTimezoneOffset() * 60,
      useUTC: false,
    },
});
Highcharts.chart('container', {
         chart: {
        type: 'column',
        zoomType: 'x',
        height: 300,
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          connectNulls: true,
          lineWidth: 4,
          marker: {
            enabled: false,
            symbol: 'circle',
          },
        },
      },
      series: seriesData,
      xAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000 * 30,
        labels: {
          align: 'center',
          format: "{value:%b '%y}",
          enabled: true,
          y: 20,
        },
      },
      yAxis: {
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        tickmarkPlacement: 'on',
        stackLabels: {
          enabled: true,
          style: {
            textShadow: 0,
          },
        },
      },
});
    }

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

Related Tutorials