durgeshsharma
Posts: 4
Joined: Tue Jan 07, 2025 9:35 am

Request to Remove Bar Space with null Value and Adjust Other Bars Width

I am currently using Highcharts for a bar chart visualization and encountered an issue where bars with a value of null still occupy space on the chart. This results in unnecessary gaps, which affects the visual clarity and aesthetic of the chart. Actually I have 4 category with 2 subcategories in each category with different name and I want to show this as a group but each category taking space for 8 bars each here is the structure of data :
Categories : ['Class T', 'Class S', 'Class D', 'Class I']
Sub-Categories : [ {'Class T', ‘Class T 2}, {'Class S', ‘Class S 2’}, {'Class D', ‘Class D 2’}, {'Class I', ‘Class I 2’} ]
Example : https://jsfiddle.net/8y6ozkrh/

Expected Outcome:
• Bars with a value of null should not take up any space.
• The remaining bars should automatically adjust their width to fill the chart area proportionally.
Additional Information:
• This is the screenshot from the current implementation (currently null is replaced with in the fiddle code 1 ):
f49acdca-3f4b-42f1-8279-a8c3a3f5ae90.png
f49acdca-3f4b-42f1-8279-a8c3a3f5ae90.png (37.14 KiB) Viewed 1672 times
30dfb461-33e6-4c02-8e2b-5dfdad90ef93.png
30dfb461-33e6-4c02-8e2b-5dfdad90ef93.png (6.64 KiB) Viewed 1672 times
Expected result :
f0bd90d8-2aef-43cc-bfe9-50dc5b019687.png
f0bd90d8-2aef-43cc-bfe9-50dc5b019687.png (24.49 KiB) Viewed 1672 times
Already viewed few examples but not able to resolve the issue :
viewtopic.php?t=32685
viewtopic.php?p=194017&hilit=width+bar+ ... th#p194017


Best regards,
Durgesh N Sharma
andrzej.b
Site Moderator
Posts: 576
Joined: Mon Jul 15, 2024 12:34 pm

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi,

Welcome to our forum and thanks for contacting us with your question!

There is an easy solution to your problem, you need to fix the logic of your series data (currently you don't have null or 0 value points), and use the centerInCategory API option.

Please see your demo with the fixes introduced: https://jsfiddle.net/BlackLabel/6eqsujg3/

Feel free to reach out if you have any further questions.

Kind regards,
Andrzej
Highcharts Developer
durgeshsharma
Posts: 4
Joined: Tue Jan 07, 2025 9:35 am

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

The option you provided centers the label, but it doesn't reclaim the space occupied by bars with null values. Increasing the point width results in overlapping.

https://jsfiddle.net/decv6tku/

can you please help me to increase the point width also in the example
andrzej.b
Site Moderator
Posts: 576
Joined: Mon Jul 15, 2024 12:34 pm

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi there,
You can apply the negative group padding to prevent the overlap.
Regards,
Andrzej
Highcharts Developer
durgeshsharma
Posts: 4
Joined: Tue Jan 07, 2025 9:35 am

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi,
grouped-data-with-subcat.png
grouped-data-with-subcat.png (44.51 KiB) Viewed 1475 times
In case if there is a single group data, as per the following example then it is showing in start and end of chart area, is this possible to show this data in center of chart area please review

https://jsfiddle.net/vsdbg59u/

Thanks
andrzej.b
Site Moderator
Posts: 576
Joined: Mon Jul 15, 2024 12:34 pm

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi,

Just don't set group padding, and it will work well with default settings.

Best,
Andrzej
Highcharts Developer
durgeshsharma
Posts: 4
Joined: Tue Jan 07, 2025 9:35 am

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi,

I want to update group padding dynamically by redraw or update method can you please guide me for the same as I m sharing what I am trying but not getting expected result.

Event in chart mount function : redraw: {
if (!this.isUpdating) {
this.updateGroupPadding(); // Update group padding on redraw
}

}

another approach I used is const originalRedraw = this.chart.redraw;
this.chart.redraw = () => {
const visibleSeriesCount = this.chart.series.filter(series => series.visible).length;
if (visibleSeriesCount > 2) {
this.chart.update({
plotOptions: {
column: {
groupPadding: "0.2"
}
}
},false);
} else {
this.chart.update({
plotOptions: {
column: {
groupPadding: "0"
}
}
},false);

} // Call the original redraw function
// originalRedraw.apply(this.chart);
this.chart.redraw();
};


Thanks
andrzej.b
Site Moderator
Posts: 576
Joined: Mon Jul 15, 2024 12:34 pm

Re: Request to Remove Bar Space with null Value and Adjust Other Bars Width

Hi,

Operations on redraw event can be tricky. To dynamically update the groupPadding based on the number of visible series, you can use the render and legend.events.itemClick events. This approach ensures that the groupPadding is recalculated whenever the chart is rendered or when a legend item is clicked.
Here's the implementation: https://jsfiddle.net/BlackLabel/erucz3kf/
Key Points:
• ​Render Event​: Used to initialize and update the groupPadding when the chart is first rendered.
• ​Legend Item Click Event​: Ensures that the groupPadding is recalculated after toggling series visibility via the legend.
• ​Timeout​: Allows the default toggle action to complete before recalculating the groupPadding.
This solution dynamically adjusts the groupPadding based on the number of visible series, ensuring the chart layout is always optimal.

Let me know if you need further assistance!
Andrzej
Highcharts Developer

Return to “Highcharts Usage”