What is an area chart?

An area chart - also called an area graph or filled line chart - tracks a single measure over time, with the space between the line and the zero baseline filled with color. The fill draws attention to the magnitude of the value, not just its direction of change. Use it when the size of the value matters as much as the trend - cumulative volume, total revenue, or any measure where 'how much' is part of the story.

When should I use an area chart instead of a line chart?

Use an area chart when the magnitude of the value relative to zero matters - the fill makes a large value visually heavier than a small one in a way a line alone does not. Use a Line Chart when only the trend or direction matters and the absolute size of the value is secondary, or when you are comparing multiple measures and a fill would visually compete between them.

Does the area chart show a visible line by default?

No. By default, the area chart shows only the filled shape with no visible boundary line - the edge of the fill defines the trend. Turn on Show Line in Area Styles if you want a distinct line drawn along the top edge of the filled area for extra precision.

What does the Stacked / Overlap toggle do on a single-measure area chart?

On the area chart, which accepts exactly one measure, this toggle has no visible effect - stacking only changes appearance when there are multiple series sharing a baseline. It exists because the same Area Styles panel is shared with the Stacked Area chart. Leave it at the default; it does not affect a single-measure chart.

How many data points work well on an area chart?

Similar to a line chart - a handful of points up to a few hundred work well, with the fill becoming visually noisy past around 150 to 200 points at a fixed chart width. Enable Data Zoom for dense time series so viewers can drill into a specific range without losing the overall shape.

Why does my area chart show a gap in the fill?

A gap means a null or missing value in the data for that time period - the fill and the implicit boundary break at each missing point, the same way a line chart's line breaks. The builder shows a null value prompt automatically: choose Filter Data to exclude those points, or Show data at default position to plot nulls as zero. For more control, fix the values in Transform before building the chart.

Can I show multiple measures on an area chart?

No. The area chart accepts exactly one measure. For multiple measures over time with their fills stacked on top of each other, use a Stacked Area chart.

Area Chart | Edilitics Docs

Track how a single measure changes over time with the space beneath the line filled to emphasize volume - best when size matters as much as direction.

An area chart - also called an area graph or filled line chart - tracks a single measure over time, with the space between the line and the zero baseline filled with color. Drop one date or ordered categorical field into Column and one numeric field into Row. Use it when the magnitude of the value matters as much as its trend - the fill makes a large value feel visually heavier than a line alone would.

When to Use

An area chart works like a line chart with one addition: the fill below the line anchors the value to zero, making the absolute size of the measure part of the visual story. This matters for cumulative totals, revenue volumes, or any measure where viewers should feel the weight of the number, not just its direction.

The fill can visually exaggerate small changes. A filled area draws the eye to the size of the colored region, which is influenced by the Y-axis scale as much as the actual data. If the Y-axis does not start at zero, the fill can make a minor fluctuation look like a dramatic swing. Keep the Y-axis minimum at zero on an area chart unless there is a specific reason not to.

Switch to a different chart when:

Only the trend matters, not the magnitude - use Line Chart
You have multiple measures to compare over time - use Stacked Line or Stacked Area
The dimension is unordered categories - use Horizontal Bar
You need composition over time, not just volume - use Stacked Area

Scenario	Dimension	Measure
Cumulative revenue over the fiscal year	Month	Running total of revenue
Total website traffic over 90 days	Date	Count of sessions
Total storage used over time	Week	Sum of storage GB
Inventory level over time	Date	Sum of units in stock
Total active subscriptions over time	Month	Count of active subscriptions

Required Inputs

Field	Type	Count
Dimension	Date or Ordered Categorical	Exactly 1
Measure	Numeric	Exactly 1

For step-by-step build instructions, see Build Your First Chart.

Formatting Options

The Format tab unlocks after at least one field is assigned. Once your chart is rendering, use these controls to define how it looks and how viewers interact with it.

Style

Use the chart title to state what the filled area represents - viewers should know what the volume under the curve means before they read the axis.

Control	What it does
Show Chart Title	Shows or hides the title. The text is preserved when hidden so you can toggle it back without re-entering.
Enter Chart Title	Title text. Maximum 50 characters.
Font family	Font applied to the title.
Font size	5 to 30.
Bold / Italic	Weight and style.
Alignment	Left, center, or right within the chart container.

Area Styles controls the fill itself, including whether a boundary line is drawn along the top edge.

Control	What it does
Stacked / Overlap	On a single-measure area chart, this has no visible effect - stacking only changes appearance with multiple series. It is shared with the Stacked Area chart's settings panel. Leave at the default.
Show Line	Off by default - the area chart shows only the fill with no visible boundary line. Turn on for a distinct line along the top edge of the fill, useful when precise trend reading matters alongside the volume.
Line Color	Color of the boundary line. Only available when Show Line is on.

Symbol Styles controls data point markers along the top edge of the fill. Markers are most useful when Show Line is also on - without a visible line, markers float without a clear connecting path.

Control	What it does
Show Symbols	Shows or hides the marker at each data point.
Symbol Type	The marker shape: Circle, Rectangle, Triangle, Diamond, Pin, Arrow, or None.
Symbol Size	Diameter of the marker, 0 to 20. Default is 4 - smaller than on a line chart since markers sit on a filled background rather than empty space.

Data labels print the value at each data point along the top edge of the fill. Use sparingly - on more than 15 to 20 data points, labels overlap the fill and become hard to read against the colored background.

Control	What it does
Show Data Labels	Shows or hides value labels at each data point.
Font family	Font applied to data labels.
Font size	Maximum 18. Keep at 10 or below on charts with more than 12 points.
Bold / Italic / Color	Text styling. Choose a color with enough contrast against the fill - light label text can disappear into a light-colored area fill.
Position	Vertical and horizontal alignment of the label relative to the data point. Top places the label above the point, outside the fill, and is the most readable choice.
Number Type	Default, Scientific, Decimal, or Percentage.
Display Unit	None, Thousand, Million, or Billion. Match to the Y-axis Display Unit.
Decimal Places	0 to 6. Available when Number Type is not Default.

Axes

Name the Y-axis with the unit of the measure - viewers reading the fill's height need to know what it represents.

Select X or Y before making changes. Settings apply to the selected axis only.

Control	What it does
Show Axis Name	Shows or hides the axis name label.
Axis name text	Label text. Maximum 20 characters. Defaults to the field name.
Font family	Font applied to the axis name.
Font size	5 to 30.
Bold / Italic	Weight and style.
Offset (%)	Distance between the axis name and the axis line. Increase if the name overlaps the axis labels.
Alignment	Start, center, or end along the axis.

Leave these at their defaults unless you are building a minimal dashboard layout.

Select X or Y before making changes.

Control	What it does
Show Axis Line	Shows or hides the axis line. Hiding it also hides ticks.
Line Color	Color of the axis line.
Line Width	Thickness of the axis line, 0 to 5.
Line Type	Solid, Dashed, or Dotted.
Show Ticks	Shows or hides tick marks on the axis line.
Tick Color	Color of the tick marks.
Tick Length	Length of the tick marks, 5 to 10.
Boundary Gap	When off, the fill starts and ends at the chart edges. Turn off for a clean edge-to-edge area on time series charts.

Select X or Y before making changes. Hiding axis labels also hides the axis name.

Control	What it does
Show Axis Label	Shows or hides labels along the axis.
Font family	Font applied to axis labels.
Font size	Label font size.
Bold / Italic / Color	Text styling.
Rotation	Angle of label text. Useful on X-axis when date labels are long and overlap.
Text case	Title Case, Uppercase, or Lowercase. Available on the categorical axis (X) only.
Display Unit	Auto, None, Thousand, Million, or Billion. Available on the value axis (Y) only.

Y-axis grid lines help viewers read the fill's height against the value scale. X-axis grid lines add visual noise against a filled background and are rarely needed.

Select X or Y before making changes.

Control	What it does
Show Gridlines	Shows or hides grid lines for the selected axis.
Grid Color	Color of the grid lines. Choose a color with enough contrast to remain visible against the area fill.
Left / Right / Top / Bottom	Plot area margins as a percentage. Increase Top when data labels near the peak of the fill are clipped. Increase Bottom when X-axis date labels overflow.

Interactivity

Set Tooltip Trigger to Axis on an area chart - it snaps to the nearest X position, which is easier to hover than aiming for the thin top edge of the fill.

Control	What it does
Show Tooltip	Shows or hides the tooltip on hover.
Trigger	Item: tooltip appears only when the cursor is directly over a data point marker. Axis: tooltip snaps to the nearest X position. Use Axis.
Pointer	When Trigger is Axis: Line, Shadow, Cross, or None. Line draws a vertical rule at the hovered position and reads clearly against a filled background.
Background Color	Tooltip background color.
Headers / Values tabs	Separate styling for the dimension label row (Headers) and the measure value row (Values). The Values tab includes Number Type, Display Unit, and Decimal Places.

Keep animation on when the chart is first presented - the fill building left to right draws attention to how the volume accumulates. Turn it off on dashboards that auto-refresh.

Control	What it does
Enable Animation	Turns the draw animation on or off.
Duration	How long the animation runs, 0 to 3000ms. Default is 1000ms.
Delay	Time before the animation starts after the chart loads, 0 to 2000ms.
Easing Function	The motion curve. Cubic Out (the default) gives a natural deceleration.

Enable Data Zoom for time series with more than around 60 data points, or when viewers need to focus on a specific date range.

Control	What it does
Show Data Zoom	Shows or hides the zoom control.
Zoom Type	Slider: a draggable range bar below the chart. Inside: scroll-to-zoom on the plot area. Use Slider for dashboards.
Slider Size (px)	Height of the slider bar, 10 to 100.
Position	Position of the slider relative to the chart.
Alignment	Alignment of the slider control.
Orientation	Horizontal for an area chart - scrolls through the time axis.
Show Detail Label	Shows the date or category values at the slider handles.
Background Color	Slider background.
Filler Color	Color of the selected range inside the slider.
Border Color	Slider border.
Handle Color	Color of the drag handles.
Brush Selection	Enables click-and-drag to zoom into a range.

Avoid Zoom Type "Inside" on dashboards that viewers scroll with a trackpad. Scroll events captured by the chart zoom the chart instead of scrolling the page.

On a single-series area chart, Emphasis highlights the hovered data point. Useful when the fill is dense and viewers need to identify a specific point along the top edge.

Control	What it does
Show Emphasis	Enables or disables the hover effect.
Focus Type	Item: highlights the hovered data point and dims others. Series: equivalent to Item on a single-series chart. None: no visual change on hover.
Enable Scale	Scales the hovered marker slightly larger.
Scale Size	How much the marker scales. Keep at 1.2 or below.

Enable the Toolbox when viewers need to export the chart or inspect the underlying data behind the fill.

Control	What it does
Show Toolbox	Shows or hides the toolbox icon bar.
Save as Image	Adds a download icon that saves the chart as a PNG.
Data View	Adds an icon that opens the underlying data table in the chart area.

Best Practices

Keep the Y-axis minimum at zero. The fill's visual weight is tied to the distance from the baseline. If the Y-axis does not start at zero, the fill exaggerates the apparent size of small fluctuations. This is more important on an area chart than a line chart because the colored region amplifies the distortion.

Turn on Show Line when precise trend reading matters. By default, the area chart shows only the fill with no boundary line. For most volume-focused use cases this is fine, but if viewers also need to trace the exact path of the value over time, enable Show Line in Area Styles for a clear edge.

Use a date dimension with natural order. Like a line chart, the area chart implies continuity between points. Unordered categories produce a fill that implies relationships between adjacent categories that do not exist. Use a bar chart for unordered categories.

Choose label and grid colors with contrast against the fill. A filled background reduces the contrast available for text and grid lines. Test data label and grid line colors against the actual fill color, not just against a transparent background, before publishing.

Resolve null values before publishing. A null produces a gap in both the implicit line and the fill, the same way it breaks a line chart. The builder's null value prompt offers Filter Data or Show data at default position - use Transform for more control such as forward-filling.

FAQs

Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.

Area Chart