--- title: "Area chart" description: "Stacked or overlaid area. What the area chart is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-area" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Stacked or overlaid area. It sits in the **Time series** group of the widget library. ![Example area chart on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/area.732f758665bbbc82.png) ## When to use it Use an area chart to show a quantity over time where the volume matters: cash on hand across the year, monthly income, or total portfolio value. ## When to pick something else - Comparing several trends that cross each other? Use a **Line chart**; overlapping fills hide each other. - Showing how accounts or categories add up to a total? Use a **Stacked area**. - Comparing the share of each part over time? Use a **100% stacked bar**. ## 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 | | 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). ## Area chart 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 | | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | --------------------- | | **Smooth lines** | Draw the top edge as a gentle curve. On by default; turn off for straight segments. | On or off | Automatic | | **Stacking** | None overlaps the areas, Zero stacks them, Normalize stacks them to 100%, Stream centres the stack into a flowing shape. | None, Zero, Normalize, Stream | None | | **Fill opacity** | How solid the area fill is, from 0 (clear) to 1 (solid). | Number, 0 to 1 | Automatic | | **Show points** | Draw a dot at every point on the top edge. Leave unset to show dots only when they have room. | 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. ## Examples Open the live chart above to switch between these examples: - **Balance**: All accounts - **Spending mix** ## Messy data - More than two series are stacked automatically, because overlapping fills from one baseline become unreadable. Two or fewer overlap. - The value axis always includes zero, so the area has a true baseline. - A missing value leaves a hole in the fill instead of a wedge down to zero. - Negative values fill below zero; for net cash flow a **Column chart** is usually clearer. - Values on the same date are summed by default. For balances, set the value's aggregate to **Last**. - Dates are evenly spaced in order; a period with no rows is skipped. ## On a phone A single-series area reads well at full phone width. With several series, the legend moves below the chart on narrow widths and eats into the height, so keep phone versions to one or two series. ## Related charts - [Line chart](/docs/widgets/chart-line): Time series over any field - [Sparkline](/docs/widgets/chart-sparkline): Tiny inline trend - [Stacked area](/docs/widgets/chart-stacked-area): Series stacked over time - [Stream graph](/docs/widgets/chart-stream): Centered stacked area - [Step line](/docs/widgets/chart-step-line): Discrete jumps over time