Bar chart (Vega-Lite)

This is the Vega bar chart written in Vega-Lite. Comparing the two is the fastest way to decide which you should be using, and the answer is usually this one.

#What this example shows

• mark and encoding, which replace scales, axes and marks.

• Sorting driven by the encoded value.

• A rounded bar end, set on the mark.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Support tickets by category, last 30 days",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"category": "Billing", "tickets": 142},
    {"category": "Access and login", "tickets": 118},
    {"category": "Performance", "tickets": 76},
    {"category": "Data import", "tickets": 54},
    {"category": "Integrations", "tickets": 33},
    {"category": "Other", "tickets": 21}
  ]},
  "mark": {"type": "bar", "cornerRadiusEnd": 3},
  "encoding": {
    "y": {"field": "category", "type": "nominal", "sort": "-x", "title": null},
    "x": {"field": "tickets", "type": "quantitative", "title": "Tickets"}
  }
}

#Making it your own

• sort: "-x" ranks the bars by value, which is almost always what you want.

• Horizontal bars handle long category names; vertical bars do not.

• Set title to null to remove an axis title that adds nothing.

#Related

A real chart in about ten lines.