Skip to content
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
Closed

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

lookermagic opened this issue Apr 11, 2018 · 5 comments

Comments

@lookermagic
Copy link

@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
Copy link
Contributor

@pawelfus 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
Copy link
Author

@lookermagic 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
Copy link
Contributor

@pawelfus 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);
@lookermagic
Copy link
Author

@lookermagic 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
Copy link
Collaborator

@TorsteinHonsi 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.