Create Area chart

Everything you need to know to create the chart you want.

Overview

Area charts fill the space beneath a line to emphasise volume or magnitude over time. They retain the trend clarity of line charts while conveying accumulated value.

When to use it

• Showing total volume where the area under the curve matters (e.g., hours logged, revenue).

• Comparing up to three series with clear differences.

• Highlighting change intensity rather than precise values.

Avoid area charts when series overlap heavily—stacked area charts or line charts may read better.

Data requirements

• Sequential categories (time, ordered stages).

• One or more numeric series.

• All series share the same category axis.

Style options available

Group	Control	Input type	Options	Description
Colors	Color palette	palette	—	Palette applied to series; sets the default colours for the chart.
General → Area	Type	select	area, areaspline	Selects the exact chart variant rendered for this series (line or spline).
General → Area	Line width	number	—	Thickness of the line or outline in pixels.
General → Area	Line style	select	Solid, Dash, Dot	Dash pattern applied to lines.
General → Area	Show dots	boolean	—	Toggles the display of point markers on lines or areas.
General → Area	Radius of dots	number	—	Radius of markers drawn on the line chart in pixels.
General → Area	Fill opacity (0...1)	number	—	Opacity of the area fill; 1 is solid, 0 is fully transparent.
General → Area	Gradient fill	boolean	—	Toggles gradient fills instead of flat colour.
General → Area	Gradient start opacity	number	—	Opacity of the gradient at the start point.
General → Area	Gradient end opacity	number	—	Opacity of the gradient at the end point.
General → Data labels	Show data labels	boolean	—	Shows numeric labels directly on data points.
General → Data labels	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
General → Data labels	Font name	text	—	Font family used for titles, labels, or legend text.
General → Data labels	Font style	text	—	Font weight or style (e.g., bold, italic).
General → Data labels	Font size	number	—	Font size in pixels for the selected text element.
General → Data labels	Font color	color	—	Colour of the text shown for this element.
Axes → X Axis	Show X Axis	boolean	—	Shows or hides the X axis line, ticks, and labels.
Axes → X Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → X Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → X Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → X Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → X Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → X Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → X Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → X Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → X Axis	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
Axes → X Axis	Show every n'th label	number	—	Skips labels so only every nth label is drawn.
Axes → X Axis	Rotation of labels	number	—	Rotation angle applied to axis or data labels in degrees.
Axes → X Axis	Type	select	category, linear, logarithmic, datetime	Sets the horizontal axis scale (category, numeric, logarithmic, or datetime).
Axes → X Axis	Tick placement	select	on, between	Whether ticks sit on category positions or between them.
Axes → X Axis	Point placement	select	on, between	Positions points inside their category slot (on the tick or between ticks).
Axes → X Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → X Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Y Axis	Show Y Axis	boolean	—	Shows or hides the Y axis line, ticks, and labels.
Axes → Y Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → Y Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → Y Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → Y Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → Y Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → Y Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → Y Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → Y Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → Y Axis	Labels alignment	select	left, center, right	Horizontal alignment of axis labels relative to the tick mark.
Axes → Y Axis	X offset	number	—	Horizontal offset applied to axis labels.
Axes → Y Axis	Y offset	number	—	Vertical offset applied to axis labels.
Axes → Y Axis	Type	select	category, linear, logarithmic, datetime	Sets the vertical axis scale (category, numeric, logarithmic, or datetime).
Axes → Y Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → Y Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Common	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Common	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Common	Font size	number	—	Font size in pixels for the selected text element.
Axes → Common	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Axes titles	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Axes titles	Font size	number	—	Font size in pixels for the selected text element.
Axes → Axes titles	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	X Axis margin	number	—	Extra padding around the X axis labels for titles.
Axes → Axes titles	Y Axis margin	number	—	Extra padding around the Y axis labels for titles.
Legend → Main	Show legend	boolean	—	Shows or hides the legend box.
Legend → Main	Horizontal align	select	left, center, right	Horizontal alignment for the legend box (left, centre, right).
Legend → Main	Vertical align	select	top, middle, bottom	Vertical alignment for the legend box (top, middle, bottom).
Legend → Main	Layout	select	horizontal, vertical, proximate	Orientation of the legend items (horizontal row, vertical column, or proximate).
Legend → Additional	Margin for legend	number	—	Outer margin around the legend box.
Legend → Additional	Margin top for items	number	—	Top padding inside the legend between items.
Legend → Additional	Margin bottom for items	number	—	Bottom padding inside the legend between items.
Legend → Additional	Distance between items	number	—	Horizontal spacing between legend entries.
Legend → Style	Font name	text	—	Font family used for titles, labels, or legend text.
Legend → Style	Font style	text	—	Font weight or style (e.g., bold, italic).
Legend → Style	Font size	number	—	Font size in pixels for the selected text element.
Legend → Style	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart title	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart title	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart title	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Margin bottom	number	—	Extra space below chart titles or subtitles in pixels.
Title → Chart subtitle	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart subtitle	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart subtitle	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart subtitle	Font color	color	—	Colour of the text shown for this element.

🎨 Tip: Lower the fill opacity to 50–70% when plotting multiple area series to avoid visual clutter.

Have problems or want to improve this chart type?

Ping us via [email protected].