remove space before first bar and after last in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

remove space before first bar and after last in bar 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://code.jquery.com/jquery-3.1.1.js"></script> 
      <script type="text/javascript">
$(function() {/* w ww  .  ja  v a2 s.c  o m*/
  Highcharts.chart('container', {
    chart: {
       marginTop: 0,
      marginBottom: 0,
      spacingTop: 0,
      spacingBottom: 0,
      type: 'bar',
      title: {
        text: ''
      }
    },
    credits: {
      enabled: false
    },
    title: {
      text: null
    },
    xAxis: {
      minPadding:0,
      maxPadding:0,
       lineWidth: 0,
       gridLineWidth: 0,
      tickWidth: 0,
      tickAmount: 0,
      tickmarkPlacement: 'on',
      categories: ['1-3', '4-7', '7-10', '11-14', '15-20'],
      allowDecimals: false,
            min: 0 + 0.1,
      max: 4 - 0.1
    },
    yAxis: {
      minPadding:0,
      maxPadding:0,
       lineWidth: 0,
       gridLineWidth: 0,
      endOnTick: false,
      showFirstLabel: false,
      showLastLabel: false,
      startOnTick: false,
      tickWidth: 0,
      tickAmount: 0,
      //tickmarkPlacement: 'between',
      min: 0,
      allowDecimals: false,
      title: {
        text: ''
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      column: {
        groupPadding: 0,
        pointPadding: 0,
        //pointWidth: 35, // width of bar
        pointRange: 0
      },
      series: {
        pointPadding: 0.1,
        groupPadding: 0,
        borderWidth: 0,
        //pointWidth: 30,
        shadow: false,
        stacking: 'normal',
        dataLabels: {
          align: 'right',
          enabled: false,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        },
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: auto; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials