Horizontal bar chart?

[CW_Research]

The problem with the “bar chart” (which is more accurately a column chart) is that for long labels, they get cut off. Anyone know of a way to generate an actual bar chart (horizontal bars) from a data series?

[Bill_French]

Check out the new Vega-Lite block.

[CW_Research]

Thanks @Bill.French. Found the code for it here:

Vega-Lite

Bar Chart with Label Overlays

Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple...

I’m not a coder so I spent hours trying to figure out how it works, but got it working… well, almost.

I wanted it sorted by the bar values (not the labels), and after looking at this: https://vega.github.io/vega-lite/docs/sort.html I tried all kinds of ways to place the "sort": "descending" but to no avail…

I think I’ve reached my technical limit. If anyone here figures it out I’d be very grateful :slightly_smiling_face: Basically I’m looking for a horizontal bar chart with the text labels on top of the bars, while dynamically sorting by the bar values.

[Bill_French]

CW_Research:

I tried all kinds of ways to place the "sort": "descending" but to no avail…

I believe the Vega-Lite app built by Airtable failed to embrace the sort directive with any defference to the sort order of the table or the view you happen to select in the app. Indeed, the sort directive is part of the Vega-Lite spec, but the implementation defaults to sorting the (x) axis alphabetically ascending (despite the fact that my comment in the video is in error).

We can alter this with the sort directive and this video shows how to do that and you were really close.

[CW_Research]

Thanks for the tutorial @Bill.French! Yes I discovered this behavior and got it to work, but what I was looking for is to sort by the bar aggregate values, not the bar labels alphabetically. Also this is within the “Bar Chart with Label Overlays” chart. I tried placing the “sort” directive in various places but no luck…

[Bill_French]

CW_Research:

I tried placing the “sort” directive in various places but no luck…

You’ll have to share your JSON file for me to provide any guidance.

[CW_Research]

Thanks Bill - I was just playing around with their live example for the “Bar Chart with Label Overlays”. Go to https://vega.github.io/editor/#/examples/ and click on that chart. That’s what I was working with, trying to get it sorted by the bar aggregate values.

[Bill_French]

CW_Research:

That’s what I was working with, trying to get it sorted by the bar aggregate values.

Like this?

[CW_Research]

Nope, I tried that. You can see in the preview that the grey bars aren’t descending…

[Bill_French · Accepted solution]

CW_Research:

You can see in the preview that the grey bars aren’t descending…

Oh, I see what you’re saying and what I think you want - like this? You need to aggregate pre-sort from one field imposed on another and then assert the order.