How to prevent bars overlapping eachother in Highc

问题:

HIGH CHARTS 

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

回答1:

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/

回答2:

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