--- title: "Scatter plot" description: "Two measures on x/y. What the scatter plot is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-scatter" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Two measures on x/y. It sits in the **Distribution** group of the widget library. ![Example scatter plot on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/scatter.95645f66fa8c67d0.png) ## When to use it Use a scatter plot to see whether two numbers move together, one dot per row: transaction amount against day of month, balance against monthly spending per account, or price against quantity for trades. Clusters and outliers stand out immediately. ## When to pick something else - A third number should set the dot size? Use a **Bubble chart**. - Thousands of rows piling on top of each other? Use a **Hexbin** or **Contour**. - X is a date and you want the trend? 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 date or a category or a number | | | **Y axis** | Yes | a number | You can pick several. | | **Series** | Optional | a category | | | **Color** | 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). ## Scatter 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 | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | --------------------- | | **Jitter** | Spread overlapping points sideways by up to this many pixels (24 at most). Points on a category axis get a small spread even at 0. | Number, 0 or more | 0 | | **Marker shape** | The shape drawn for every point. | Circle, Square, Triangle, Diamond, Cross, Star | Automatic | | **Point opacity** | How solid each point is, from 0 to 1. Lower it to see through crowded clusters. | Number, 0 to 1 | Automatic | | **Show trend line** | Draw a straight best-fit line through the points. Needs a numeric x axis. | 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 - Rows missing either value are left out; if none remain it shows "No points to show". - Beyond 2,000 rows, an even sample of 2,000 is drawn. - Colour groups are capped: the 3 most common keep their colour and the rest share one **Other** colour. - Neither axis is forced to include zero, so the plot zooms in on where the data is. - If x is a date or a category instead of a number, dots line up on an ordered axis and are spread sideways slightly so they don't hide each other. ## On a phone Dots stay readable at full phone width, but dense plots become a blob. On a phone, a **Hexbin** or a filtered scatter reads better. ## Related charts - [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 - [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