Reversing x-axis on a grouped column chart reverses column ordering

[lookermagic]

Expected behaviour

When more than one series is plotted as a grouped column chart, and xAxis.reversed is set to true, the order in which the columns appear within a grouping should not be reversed. (only the order of the data points along the x-axis should be reversed in this case)

Actual behaviour

The order of columns within the grouping is reversed as well as the ordering of the data points.
This leads to an inconsistent user experience, especially in the case where some series are represented by columns while others by lines or areas.

Product version

Highcharts v6.0.7

Note: The same behavior appears to be true of reversing the y-axis for bar charts.
Note2: If this behavior is indeed the desired default, then there should be some way to change it in the chart configuration object. I could not find a way to do this (other than by manually reversing series indices, which strikes me as a terrible hack with problems of its own).

[pawelfus]

Hi @lookermagic

Could you add demo with the issue? I assume this is simple case: http://jsfiddle.net/BlackLabel/d0gx679u/2/ - but you mention issue with columns & other types. Maybe you simply want to set legend.reversed to true: http://jsfiddle.net/BlackLabel/d0gx679u/4/ ? Detailed description of this inconsistent user experience would be great.

I think that current behaviour makes sense - first column on a non-reversed xAxis is the last one in a reversed xAxis. Order of colors is a bit strange, but probably I'm used to specific order in default charts and anyway this can be controlled by chart.colors..

[lookermagic]

@pawelfus Thanks for getting back to me on this! The jsfiddle you linked to demonstrates the issue precisely. My team is rebuilding an existing set of visualizations using Highcharts, and the column-order-swapping behavior on x-axis reverse is inconsistent with what we have now. Here's an example of our current 2-series column vis in monotone increasing x-axis order:

and here's the same, with x-axis order reversed:

I don't mind if the current Highcharts x-axis reversal behavior remains the default, but I'd like a way to change it programmatically using the Highcharts API so that it matches the behavior shown above.

In my original writeup I probably confused the issue by talking about other vis types. Let's keep this to the column order switching behavior for the purposes of this issue.

[pawelfus]

Thank you for the details. It looks like reversing is expected (there are parts that calculate this):

• highcharts/js/parts/ColumnSeries.js

  Line 489 in 4cd3bbc

  colIndex = (series.columnIndex || 0) + (reversedXAxis ? 1 : 0),

• highcharts/js/parts/ColumnSeries.js

  Line 496 in 4cd3bbc

  ) * (reversedXAxis ? -1 : 1);

@TorsteinHonsi - can we make this as an option?

Workaround: http://jsfiddle.net/BlackLabel/d0gx679u/24/

Snippet:

(function(H) {
  H.wrap(H.seriesTypes.column.prototype, 'getColumnMetrics', function(p) {
    var keepOrder = this.xAxis.reversed && this.xAxis.options.keepOrder,
      reversed = this.xAxis.reversed,
      metrics;

    if (keepOrder) {
      this.xAxis.reversed = false;
    }

    metrics = p.apply(this, Array.prototype.slice.call(arguments, 1));

    this.xAxis.reversed = reversed;

    this.columnMetrics = metrics;

    return metrics;
  })
})(Highcharts);

[lookermagic]

Hi @pawelfus - that's the exact behavior I was looking for, thank you! I'll implement your above workaround until an official option to this effect becomes available.

[TorsteinHonsi]

@TorsteinHonsi - can we make this as an option?

Sure, @pawelfus . Can you make a PR?