Column overlap when using highcharts-angular

[menlodev]

Hi,

We're using the "highcharts-angular" npm package, version 2.1.3, to build an Angular single page app with typescript. We are seeing that the bars on our column chart are touching/overlapping at higher zoom levels with a large amount of data points (eg. 8hr zoom, 240 data points).

We've seen previous posts about this issue recommend having the following options, which we have set already:

plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0,
borderWidth: 0,
}
}

Where "pointPadding: 0.1" is meant to ensure that the columns do not touch or overlap.

Are there any other options that we should set to keep our columns from touching/overlapping with a high number of columns?

See attached images:
- 4-hr-zoom.png: 4-hr zoom, no columns touching
- 8-hr-zoom.png: 8-hr zoom, some columns touching

Thank you!

[wojtek]

Hi menlodev,

This behaviour is very strange, could you send a simplified online demo of your chart/app (codesandbox for example)? Then I will be able to debug it easily.

Have you tried to set groupPadding greater than 0?

Kind regards.

[menlodev]

Hi wojtek,

Here is a codesandbox with an example our settings: https://codesandbox.io/s/l42nn97wql

The bars merging is visible at the 4 hour zoom.

Thanks!

[wojtek]

menlodev,

The problem is not related to the Angular wrapper. You set chart width to 613px and disabled dataGrouping, but your data has 720 points. It is not possible to present it on the chart because there are more points than pixels. So increase chart width or just enable dataGrouping and bars will be rendered as expected. Additionally, you can add borderWidth.

Demo:
https://codesandbox.io/s/py65p427o0

Api reference:
https://api.highcharts.com/highstock/se ... taGrouping

Kind regards.

[menlodev]

Hi wojtek,

Changing the borderWidth fixed our issue. Thank you for your help!

[wojtek]

You're welcome