Posts: 4
Joined: Thu Nov 24, 2022 7:01 pm

Inconsistent Column Spacing When Splitting Single Series for Color Differentiation


Problem Statement:
The goal is to split a single series into two series to assign different colors to each series and display them in the legend. However, the issue arises when observing the arrangement of columns in the chart.

Observed Behavior:
After splitting the single series into two, the columns in the chart appear to be closer together, deviating from their original equidistant arrangement. This results in an uneven spacing between columns.

Expected Behavior:
The expected behavior is that the columns should remain equidistant even after splitting the single series into two series. Each column should maintain the same spacing as before the split, ensuring a consistent and visually pleasing layout of the chart.
Posts: 772
Joined: Fri Sep 01, 2017 11:01 am

Re: Inconsistent Column Spacing When Splitting Single Series for Color Differentiation

Hi hemanthreddyk,

Thank you for contacting us, and running Highcharts. We really appreciate it!
In order to achieve the desired effect and center the point when there is no data within the other series with the same category, you should turn on the centerInCategory parameter by setting it to true. The best place to do it is to set it up globally through the plotOptions.column object literal, in order to avoid setting it on all of the series one by one.

Hope it fits your requirement.

API Reference: https://api.highcharts.com/highcharts/p ... InCategory
Demo: https://jsfiddle.net/BlackLabel/eks25xjn/

Best regards!
Daniel Studencki,
Highcharts Developer

Return to “Highcharts Usage”