How to prevent bars overlapping eachother in Highcharts?

问题

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

来源：https://stackoverflow.com/questions/45750623/how-to-prevent-bars-overlapping-eachother-in-highcharts