How to prevent bars overlapping eachother in Highc

Question

HIGH CHARTS 

Please look at JSFIDDLE. Here the bars overlap each other. How to prevent this by resizing the bar width dynamically.

Answer 1

If possible remove container inline css height.

Fiddle Demo

Or you can use scrollbar using highstock.js

 xAxis: {
  categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'sixth', 'seventh'],
  allowDecimals: false,
  min: 0,
  max: 4,
  scrollbar: {
    enabled: true
  },
},

Fiddle demo

Answer 2

If happens because you set bar width with fixed value. If you want bars to take all available place for width, instead of using pointWidth, set pointPadding to 0, groupPadding to 0 and borderWidth to 0.

API Reference:
http://api.highcharts.com/highcharts/plotOptions.bar.pointPadding
http://api.highcharts.com/highcharts/plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts/plotOptions.bar.borderWidth

Example:
http://jsfiddle.net/yek6g5vy/