Ordering of non-grouped columns in Highcharts

Question

Is there a way to order the column display in order to force the columns with smallest values forward (higher z-index)?

Here's a non-grouped column chart, which is accomplished by setting the grouping: false in the column settings for the plotOptions.

The idea is to always have the smaller bar on top (if there are multiple bars, continue stacking the taller ones behind). Notice this example uses transparency to circumvent that issue; however, the new color is not reflected in the legend.

I've scoured the Highcharts API but couldn't find much information.

I think that it is hard to find simple solution for your question. You can wrote custom function that can help you with your problem. Please take a look at this example: jsfiddle.net/w123o1je/10 — Grzegorz Blachliński
All series' points are in same graphic group and each series has its own group, so it is not possible to set different z-index for a point in series to make it on top of another series while rest of the points in first series is below. You could create more series - each can have z-index set. — Kacper Madej

Mike Zavarello Mike Zavarello · Accepted Answer · 2016-06-23T01:27:08

In order to do what you're asking, you would have to set a z-index value for each data point in each series (similar to how you can set a unique color for each data point, such as data: { y: 10, color: 'blue' }).

Unfortunately, the Highcharts API doesn't recognize z-index values for individual data points. Different z-index values can only be applied at the series level.

You may want to consider translucent columns with different widths, as shown in the "fixed placement columns" demo: http://www.highcharts.com/demo/column-placement

I hope this information is helpful for you.

Ordering of non-grouped columns in Highcharts

1 Answers