CODEWITHSUNDEEP
highcharts
vol7ron
vol7ron

Reputation: 42109

Ordering of non-grouped columns in Highcharts

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.

Upvotes: 1

Views: 243

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

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.

Upvotes: 1

Related Questions