Help with Line Step Behavior and Column Alignment in Highcharts

[MayankOfficial]

Hi Team,

I am using a combination of columns and lines in Highcharts.

Here's the demo for reference : https://jsfiddle.net/4cqnr2kL/19/

What I Need:

Line Steps: The line should start from (0,0), remain on the x-axis, and step up only where a column exists. If there’s a gap between categories, the line should drop back to the x-axis. Currently, the steps are category-based, but I need them to be column-based and start from (0,0).

Column Alignment: When multiple columns exist in a category (e.g., the first category has three), they should be tightly grouped without gaps and aligned with the category label. If a category has columns only at the first and last positions, there shouldn’t be a gap in the middle.

How can I configure Highcharts to achieve this behavior?

Thanks for your assistance!

[andrzej.b]

Hi,

With column setting it's easy, you just need to apply proper centerInCategory, pointPadding and borderWidth.
With the line series, it's tricky. With the current setting, you might prefer the left step: https://api.highcharts.com/highcharts/series.line.step
Demo: https://jsfiddle.net/BlackLabel/56g9oarn/

There is no 0,0 point here, as with categorical xAxis you are not having a cartesian plot area. First category has index 0.
You can try to play with additional hidden xAxis and connect the line to it, I'm not sure how it would scale.

Please let me know if I can be of any further assistance.

Kind regards,

[MayankOfficial]

Hi Andrzej,

Thank you for your response.

The configuration for column settings and aligning them with labels centered is working fine.

However, regarding the line behavior I described earlier, could you please provide an example or data format to help me achieve the expected behavior with both category and column grouping?

In the attached demo, you can see that we have three lines and three different categories. Each category contains columns.

Our requirement is:

The line should start from zero (lying on the x-axis).
Wherever there is a column within a category, the line should step up to a specific point and cover each column in the same way.
Between categories, where there is a gap, the line should drop back to the x-axis before stepping up again for the next category.
To achieve this with category and column grouping, what type of data and configuration should we follow?

[andrzej.b]

Hi @MayankOfficial,

I'm afraid we don't have such a feature easily available. If you think such a feature would be useful for more users, you can request it here: https://github.com/highcharts/highchart ... new/choose You can expect possible updates or workarounds there. However, if you need a customized solution for yourself without waiting for us to resolve the request, please contact us directly.

Kind regards,

[MayankOfficial]

Hi @Andrzej,

Thank you for your response and guidance. I'll submit a feature request on GitHub as you suggested. In the meantime, I'll explore possible workarounds or customization options for my specific use case.

If I need further assistance or decide to go with a customized solution, I'll reach out directly.

Thanks again for your support!

Best regards,
Mayank

[andrzej.b]

You're welcome! In case of any further questions, feel free to contact us again.