Unify Logo Footer.svg
Unify Applications
Logo
Line & Area Charts

Line & Area Charts

Logo

7 mins READ

Overview

The Line chart is a cartesian chart type within the Chart block. It plots one line per series across an X axis, with the richest per-series styling of any chart type — including line width, dash pattern, shape (linear vs spline), area fill below the line, and point markers. An area chart is simply a Line chart with the Fill under line option enabled on one or more series.

Tip: Set Chart Type to Line and enable Fill under line per series (gradient, solid, or none) to create an area chart. A single-series chart without grouping defaults to a gradient fill; multi-series defaults to none.

X Axis Configuration

Line shares the same X-axis machinery as Bar and Column:

PropertyWhere to SetDescription
ValueContent → X Axis → ValueThe field plotted on the X axis.
LabelContent → X Axis → LabelAxis caption.
Type (scale)Content → X Axis → Typelinear, time, or category. Default linear. Use time for chronological data — this enables the Forecast feature.
Plot Periodic ValuesContent → X Axis → Plot Periodic ValuesPeriod mode: map a Start value and End value field per row.
Group byContent → X Axis → Group byAvailable while the chart has at most one series. Each distinct group value becomes its own plotted line.

Y Axis

Line offers Y-axis domain (Min Value / Max Value, default auto) in addition to the standard label, tick format, and series list.

PropertyWhere to SetDescription
LabelContent → Y Axis → LabelY-axis caption.
Tick labelsContent → Y AxisValue format: Number, Percent, Currency, or Duration. Compact notation available for Number and Currency.
Min Value / Max ValueContent → Y Axis → Min / MaxFixed Y-axis bounds. Default auto-scaled from data.
SeriesContent → Y Axis → SeriesOne or more series. Manual or Mapped mode.

Per-Series Line Styling

Each series on a Line chart has a rich set of appearance options, accessed through the series detail panel:

PropertyDefaultDescription
Line width1Stroke width of the line.
Line dashsolidLine style: solid, dashed, or dotted.
Line shapelinear (category/linear); spline (time)linear connects points with straight segments. spline smooths the curve between points. For time-scale data, the default is spline.
Fill under linegradient (single series, no grouping); none otherwiseArea fill below the line. Options: gradient, solid, none. This is what turns a Line into an Area chart.
Point MarkersonToggle markers on each data point. When on, adds Symbol (circle/square/diamond/cross), Size (default 6), fill/border colors, and border width (default 2).

Forecast

Plot the tail of a line in a different visual style to mark projected values. Only available when the X-axis Type is time.

PropertyWhere to SetDescription
Forecast (toggle)Series detail panel → ForecastEnables forecast styling for this series.
Forecast FromSeries detail panel → Forecast FromDate/time (epoch) after which points are drawn as forecast.
PatternSeries detail paneldashed (default) or dotted for the forecast segment.
ColoursSeries detail panelForecast line color, marker fill and border colors.

Warning: The Forecast section appears only while the Line chart's X-axis Type is time. Switching to linear or category removes the section — already-configured forecasts stop being offered in the inspector.

Common Properties

PropertyWhere to SetDescription
TooltipContent → TooltipCustom header and body text for the hover tooltip.
SummaryContent → SummaryA row of formatted KPIs rendered with the chart.
Threshold (add-on)Content → Add onsA reference line at a single value or a min–max band.
Scroller / Range Slider (add-on)Content → Add onsPan and zoom the X axis. Labelled Range Slider on time/linear axes with configurable initial visible region.
Chart ColoursAppearance → Chart ColoursColor assignment per series, by group values, or by conditions.
Data Labels (per series)Series detail panel → Data LabelsPrint value labels on each point. Available when there is no Group by. Position is automatic on Line.

Events

EventDescription
On Data Point ClickFires when user clicks a data point. Payload is the clicked record (all fields).

Behavior & Gotchas

⚠ A time-series line connects straight across missing dates

Rows absent from the data leave no visible gap — the line joins the surrounding points directly. A week of missing data looks like a smooth trend. Fill the gaps in your query with explicit null/zero rows if you want them visible.

⚠ Non-numeric series values plot as zero

A null, missing, or non-numeric value in a series field renders as 0 — the line dips to the baseline instead of breaking at missing points.

⚠ Only the first row per category is plotted

On category and time scales, a second row with the same X value is silently dropped. Aggregate duplicates in your data before binding.

⚠ Group by is hidden once you add a second series

Group by on Line is only present while the series list has at most one entry, matching Bar's behavior (unlike Column which always shows it).

⚠ Data labels always placed automatically on Line

Line has no position control for data labels — the chart positions them automatically. Labels are available as long as there is no Group by.

Common Patterns

Multi-Series Trend Comparison

  1. Set up Line chart with time axis: Set Chart Type to Line and X Axis → Type to time. Bind a date field to X Axis Value.

  2. Add multiple series: Add one series per metric (e.g., revenue, cost, profit). Each becomes its own line.

  3. Style lines distinctly: In each series detail panel, vary Line dash (solid / dashed / dotted) or Symbol shape (circle / square / diamond) to differentiate them without relying only on color.

Stacked Area Chart

  1. Configure Line chart with multiple series: Add one series per category. Set Line shape to spline for a smooth look.

  2. Enable area fill: In each series detail panel, set Fill under line to solid with a low-opacity color. The fills stack visually.

Actuals with a Forecast Tail

  1. Set X-axis to time: Set X Axis → Type to time — required for forecast.

  2. Enable forecast on the series: In the series detail panel, enable Forecast and set Forecast From to today's date.

  3. Style the forecast segment: Keep the dashed pattern and adjust forecast colors to mute them relative to actuals.

Plotting a Continuous Equation

  1. Use linear X axis: Set X Axis → Type to linear.

  2. Sample your equation into data: Generate an array of {x, y} points in a run script or computed variable — the chart only plots rows you bind; there is no formula input.

  3. Smooth the curve: Set Line shape to spline and sample more points for a smoother result.

PageRelationship
Bar & Column ChartsShares cartesian axis and series configuration
Data Labels & AnnotationsValue labels on line points
Scatter & Bubble ChartsPoint-based distribution plots on the same cartesian axes

Frequently Asked Questions

How do I turn a line chart into an area chart?

In the per-series settings, enable Fill under the line style options. The fill color fills the area between the line and the X axis. Use the Fill Opacity setting to control transparency. For a stacked area chart, set multiple series with fill enabled — the block stacks them automatically.

Why does my line chart show a zero value instead of a gap for a missing date?

The block treats any missing value as zero when connecting data points. There is no automatic gap. If you want to represent absence, include the date in your data with a null value, and ensure your data source does not coerce nulls to zero. The resulting null point disconnects the line at that date.

How do I add a forecast tail to my line chart?

The Forecast feature requires the X axis to use a Time scale. Configure Forecast from as the date where your historical data ends and the forecast begins. Add a series for your forecast values �� the visual treatment (e.g., dashed line) differentiates it from the historical series. You control the dashed style in Per-Series Line Styling.

My line chart with a Time X axis is not showing dates in the right order. What's wrong?

Ensure the X axis Type is set to Time, not Category. In Category mode, values are sorted by their order in the data. In Time mode, the block parses date strings and plots them chronologically. Also verify that your date field values are in a consistent, parseable format (ISO 8601 recommended).