--- title: "Line chart" description: "Time series over any field. What the line chart is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-line" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Time series over any field. It sits in the **Time series** group of the widget library. ![Example line chart on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/line.e89892656b8902e2.png) ## When to use it Use a line chart to see how a number moves over time: an account balance day by day, monthly spending, or a holding's value across a year. Several lines compare trends, such as spending per account. ## When to pick something else - Comparing totals per period? Use a **Column chart**. - Balance that only changes on specific days? Use a **Step line**. - Showing how parts add up to a total over time? Use a **Stacked area**. - Just a trend at a glance inside a small card? Use a **Sparkline**. ## 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). ## Line 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 gently curved lines between points. On by default; turn off for straight segments. | On or off | Automatic | | **Step line** | Draw the line as flat steps that change before, after or halfway between points. Replaces smoothing. | Before, After, Middle | Automatic | | **Show points** | Draw a dot at every point. Leave unset to show dots only when they have room, plus the last point. | On or off | Automatic | | **Start at zero** | Always include zero on the value axis, so the line is read against a zero baseline. | 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 - Values on the same date are summed by default. For balances, set the value's aggregate to **Last**. - A missing value leaves a break in the line rather than dropping to zero. - Dates are placed in order but evenly spaced: a month with no rows is skipped, not shown as a gap. - More than 8 series: the 7 largest keep their colour and the rest merge into **Other**. - The value axis does not start at zero, so small movements look large; turn on the baseline option to include zero. - No numeric values shows "No numbers to show". ## On a phone Lines read well at full phone width. With many dates the axis shows fewer labels and only the latest point is marked. The legend moves below the chart on narrow widths. ## Related charts - [Area chart](/docs/widgets/chart-area): Stacked or overlaid area - [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