Highcharts - bar chart columns too thin with too m

Question

I am developing a angular2 application using highcharts, but i have a problem about showing a bar chart. I have applied their sample code of highcharts to my application. It works. But when i added extra series to the chart, the columns becomes unreasonably too thin. my result

I separately tried the sample code on JSfiddle with adding extra series to the code. It works however. ... workable example

Answer 1

I've recently faced a very similar issue and even posted a question about it. The solution seems to be pretty easy - for me the problem was in outdated highcharts (5.0.8) and highcharts modules(exporting, boost, highcharts-more, heatmap) (v. 5.0.8), so if you cannot reproduce your local behavior in jsfiddle try setting particular version of highcharts libraries like I've done here.

<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>

However when I updated to highcharts 5.0.14 the problem disappeared.

Hope this helps!

UPDATE

The issue was with a boost.js module, in particular with seriesThreshold property was set to 10 by default (now it is 50). Please find a detailed answer with example here

Answer 2

If you don't mind scrollable high-chart then this issue can be resolved. Instead of Highchart use HighStock library, it will provide additional "scrollbar" option which you can combine with X-axis max option to show the data properly.

Here is the Updated Link for same code

 scrollbar:{
    enabled:true
},
xAxis: {
     max:0
// rest of the code}

This answer will be good help to go in details.