---
title: "Circular bar"
description: "Bars around a circle. What the circular bar is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-circular-bar"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Bars around a circle. It sits in the **Radial** group of the widget library.

![Example circular bar on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/circular-bar.b07eadbd735ecd1a.png)

## When to use it

Use a circular bar chart to show many values around a circle, such as daily spending across a month or transaction counts by merchant. Bars radiate out from an inner ring, so a long run of categories fits where a straight bar chart would crowd its labels.

## When to pick something else

- Readers need to compare exact values? Use a **Column chart** or **Bar chart**.
- A daily pattern laid out on a calendar? Use a **Calendar heatmap**.
- Only a few categories? Use a **Radial bar** or **Lollipop**.
- A trend over time? Use a **Line chart**.

## The data it needs

Pick these in the **Data** tab of the inspector. BankSync suggests a column for each when your source has an obvious match.

| Field      | Needed   | Pick                 | Notes |
| ---------- | -------- | -------------------- | ----- |
| **X axis** | Yes      | a category or a date |       |
| **Y axis** | Yes      | a number             |       |
| **Series** | Optional | a category           |       |
| **Color**  | Optional | a category           |       |

Rows that share a category are combined before drawing: choose **Sum**, **Average**, **Count**, **Min** or **Max** on the value field. See [Binding data](/docs/widgets/binding-data).

## Circular bar options

This chart has no options of its own; everything on its **Style** tab is the shared chart styling below.

## Shared chart styling

Every chart also has the shared styling options. These apply to this one:

- [Legend](/docs/widgets/chart-styling#legend): position, layout and which series show.
- [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format.
- [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background).
- [Value labels](/docs/widgets/chart-styling#value-labels) on the marks.
- [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout.
- [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation.
- [Tooltip](/docs/widgets/chart-styling#tooltip) on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering).
- [Colours](/docs/widgets/chart-styling#palette): follow the dashboard palette or pick one for this chart.

## Messy data

- Rows in the same category are added together. Bars keep your data's order unless you sort by size.
- How many bars fit depends on the card size, up to 48. Anything past that folds into one grey "Other" bar.
- Negative values are dropped. If only negatives remain you see "Only negative values; nothing to show".
- All zeros show "Everything is zero for this period".
- Every bar has the same colour. There is no legend; read labels round the edge or hover.

## On a phone

On a phone the circle shrinks, so fewer bars fit before the rest fold into "Other". When the labels run into each other, only every few labels are shown, and each is shortened.

## Related charts

- [Radar chart](/docs/widgets/chart-radar): Multi-axis comparison
- [Polar chart](/docs/widgets/chart-polar): Radial categorical