Horizontal Bar: Automatically Order By Numerical Value


Is there a way to have a horizontal bar’s x and y value pairs automatically order in descending value from by their numerical values?


Something like https://codepen.io/etpinard/pen/YEbWoO?editors=0010 might do.


Thanks! Loads faster as well. Is it possible to just show the top 10 or 20 values among the x/y pairs and highlight the top one in a different color? The data is updating from another API so that’s why I want to include the whole set.

Generally speaking, I’m unsure how to add in layout (to set width/height), config etc parameters in the style of code you gave (for this and the other choropleth). Before I would set them all in variables and then use the newPlot function (like the examples on the site). Tried putting them in like you did for the “transform” object. Thanks again for your help!


Something like https://codepen.io/etpinard/pen/KZWyZv?editors=0010 should get you close.


Awesome! Is there a way to color or highlight the highest valued x/y pair?

Also, why is it the graph doesn’t contain the full text of the Y values after it loads? Editing the width and height doesn’t seem to make them display. Screenshot below.


See https://plot.ly/javascript/bar-charts/#customizing-individual-bar-colors


That appears to work based upon the order of x values in the array. The order of the data that’s being plotted doesn’t correspond to the order of each x/y pair’s numerical value. This data also changes based upon what is acquired from an API GET request.

Is there a way to automatically mark the highest numerically valued x/y pair on a bar? Or a way to mark x/y pairs based on being greater than a certain value, like you showed in the transform for ordering the bar?