Remove space between plot border and actual chart in area chart - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

Remove space between plot border and actual chart in area chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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> 
      <script type="text/javascript">
$(function () {/*from  w w  w  . jav  a2s  . c om*/
    var chart = new Highcharts.Chart({
        chart:{
            renderTo: 'container',
         type: 'areaspline',
         plotBorderWidth: 1,
         spacingTop:2,
         spacingRight:5,
         spacingBottom:5,
         spacingLeft:2,
         borderWidth:1,
         borderRadius:0,
         borderColor:'#999'
      },
      credits: {
         enabled: false
      },
      title: {
            text: 'Total spam in the last 7 days'
        },
      legend: {
         verticalAlign: 'bottom',
         borderWidth: 1,
         backgroundColor: '#FFFFFF'
      },
      xAxis: {
         allowDecimals:false,
            minPadding:0,
            maxPadding:0,
         labels: {
                staggerLines: 2
            },
         tickmarkPlacement: 'on',
      },
      yAxis: {
         allowDecimals:false,
         alternateGridColor: '#F7F7F7',
         title: {
            text: 'Number of Emails',
            margin:5
         }
      },
      tooltip: {
         formatter: function() {
            var isSpam = this.series.name === _chartOptions.series[1].name
            return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
         }
      },
      plotOptions: {
         areaspline: {
            fillOpacity: 0.5
         }
      },
        series:  [{
                "name": "Total Mail",
                "color":"#339999",
                "data": [2,3,4,7,8,8,8]
            },{
                "name": "Spam",
                "color":"#003399",
                "data": [2,2,4,4,4,6,8]
        }]
    });
});

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

Related Tutorials