# 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.

![Bar chart (Vega-Lite)](https://help.gocapable.com/images/att1423540270.svg)

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

[Line chart (Vega-Lite)Time on the x-axis, a series in colour.](https://help.gocapable.com/diagrams/line-chart-vega-lite.html)

[Stacked bar (Vega-Lite)Totals and composition, with one extra line.](https://help.gocapable.com/diagrams/stacked-bar-vega-lite.html)

[Vega-Lite examplesBack to the rest of these examples.](https://help.gocapable.com/diagrams/vega-lite-examples.html)

---

_A real chart in about ten lines._