New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lookermagic opened this Issue Apr 11, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@lookermagic

lookermagic commented Apr 11, 2018

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

This comment has been minimized.

Contributor

pawelfus commented Apr 12, 2018

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

This comment has been minimized.

lookermagic commented Apr 12, 2018

@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:

image

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

image

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

This comment has been minimized.

Contributor

pawelfus commented Apr 13, 2018

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

@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);

@pawelfus pawelfus added Undecided and removed Pending reply labels Apr 13, 2018

@lookermagic

This comment has been minimized.

lookermagic commented Apr 16, 2018

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented May 3, 2018

@TorsteinHonsi - can we make this as an option?

Sure, @pawelfus . Can you make a PR?

@pawelfus pawelfus self-assigned this May 3, 2018

pawelfus added a commit that referenced this issue May 7, 2018

pawelfus added a commit that referenced this issue May 7, 2018

@pawelfus pawelfus added the Enhancement label May 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment