--- title: "Box plot" description: "Quartiles with whiskers. What the box plot is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-boxplot" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Quartiles with whiskers. It sits in the **Distribution** group of the widget library. ![Example box plot on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/boxplot.de25a6232303f3a5.png) ## When to use it Use a box plot to compare how spread out amounts are across a few groups, not just their totals. Each box shows the middle half of the values and the median. For example, compare transaction sizes by category to see that groceries are steady while travel swings widely. ## When to pick something else - Want to see every transaction, not a summary? Use a **Strip plot** or **Beeswarm**. - Want the shape of the spread, such as two clusters? Use a **Violin** or **Ridgeline**. - Comparing totals, not spread? Use a **Column 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 | | ------------ | -------- | ---------- | ----- | | **Category** | Optional | a category | | | **Value** | Yes | a number | | | **Series** | Optional | a category | | Each row is drawn as it is, so shape the rows first if you need totals. See [Shaping data](/docs/dashboards/dashboards-shaping-data). ## Box plot options Set these on the **Style** tab of the inspector. "Automatic" means BankSync picks a value from the chart's size and data. | Option | What it does | Values | New charts start with | | ------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------- | --------------------- | | **Show outliers** | Draw the values beyond the whiskers as separate dots. | On or off | On | | **Whisker length** | How far the whiskers reach, as a multiple of the box height (the middle half of the values). The usual value is 1.5. | Number, 0 or more | Automatic | | **Box width** | Width of each box as a fraction of its slot, from 0 to 1. | Number, 0 to 1 | Automatic | | **Show median** | Draw a line across each box at the median. On by default. | On or off | Automatic | | **Show all points** | Draw every individual value as a dot over the boxes. | On or off | Automatic | | **Show average** | Mark the average of each group with a small marker. | On or off | Automatic | ### Needs history Show a note instead of the chart until the rows cover enough periods, so a first week never reads as a trend. | Option | What it does | Values | New charts start with | | ------------------- | ---------------------------------------------------------------------------------- | ------------------------------- | --------------------- | | **Date field** | The date column whose distinct periods are counted. | Text | Automatic | | **Period** | What counts as one period: a day, week, month, quarter or year. | Day, Week, Month, Quarter, Year | Automatic | | **Periods needed** | How many distinct periods the rows must cover before the chart draws (2 to 60). | Whole number, 2 to 60 | Automatic | | **Waiting message** | Shown until there is enough history. Leave empty for a message naming the periods. | Text, up to 120 characters | Automatic | ## 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 - Blank or non-numeric amounts are skipped, never counted as zero. If nothing is left you see "No numbers to show". - A group with a single value still draws a thin, visible box. - Negative amounts are fine: the axis does not force zero, so refunds and spending can share one chart. - Values far outside the typical range are drawn as separate outlier dots. - Too many groups for the width fold into one "Other (n)" box, keeping the groups with the most values. ## On a phone On the phone stack the chart spans the full width, which fits roughly a dozen boxes before the rest fold into "Other". Long category names are shortened or thinned along the bottom axis, so keep group names short. ## Related charts - [Scatter plot](/docs/widgets/chart-scatter): Two measures on x/y - [Histogram](/docs/widgets/chart-histogram): Distribution of one measure - [Violin](/docs/widgets/chart-violin): Density per category - [Beeswarm](/docs/widgets/chart-beeswarm): Non-overlapping dot plot - [Density](/docs/widgets/chart-density): Kernel-smoothed distribution - [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