---
title: "Density"
description: "Kernel-smoothed distribution. What the density is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-density"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Kernel-smoothed distribution. It sits in the **Distribution** group of the widget library.

![Example density on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/density.a23b22834148dffe.png)

## When to use it

Use a density chart to see the shape of one number field as a smooth curve: where most values sit, and whether there are two peaks or a long tail. For example, look at the size of all your card transactions to see that most are under $50 with a thin tail of large purchases. You can overlay up to three groups.

## When to pick something else

- Readers need exact counts per range? Use a **Histogram**.
- Comparing more than three groups? Use a **Ridgeline** or **Violin**.
- Want medians and quartiles side by side? Use a **Box plot**.

## 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 |
| --------- | ------ | -------- | ----- |
| **Value** | Yes    | a number |       |

Each row is drawn as it is, so shape the rows first if you need totals. See [Shaping data](/docs/dashboards/dashboards-shaping-data).

## Density 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.
- [Colours](/docs/widgets/chart-styling#palette): follow the dashboard palette or pick one for this chart.

## Messy data

- Blank or non-numeric values are skipped. With none left you see "No numbers to show".
- At most three curves are drawn: the two groups with the most values, plus "Other" for the rest.
- The height axis is hidden by default because raw density numbers mean little. Hover to see how many values sit nearby.
- The curve runs a little past your smallest and largest values so it tapers off, which can suggest values just outside your real range.

## On a phone

A single curve reads well at full phone width. With several groups the legend takes a row and the see-through fills overlap, which is harder to tell apart on a small screen, so keep it to one or two groups.

## Related charts

- [Scatter plot](/docs/widgets/chart-scatter): Two measures on x/y
- [Histogram](/docs/widgets/chart-histogram): Distribution of one measure
- [Box plot](/docs/widgets/chart-boxplot): Quartiles with whiskers
- [Violin](/docs/widgets/chart-violin): Density per category
- [Beeswarm](/docs/widgets/chart-beeswarm): Non-overlapping dot plot
- [Ridgeline](/docs/widgets/chart-ridgeline): Stacked distributions
- [Strip plot](/docs/widgets/chart-strip): Each value as a tick
- [Jitter plot](/docs/widgets/chart-jitter): Scattered dots per category