← All diagram types
MERMAID LINE CHART GUIDE

Mermaid Line Chart Syntax & Examples

Use xychart with a line data array to show change across time or another ordered sequence. Copy the example below and replace the labels and values.

Open the Line Chart editor See the syntax

MERMAID EXAMPLE

Mermaid line chart example

Copy the working code, replace the labels and values, then continue editing the same diagram in Mermaid Studio.

Show product growth

Track service metrics

Explain changes across a timeline

Mermaid line chart example rendered Mermaid preview. Source code: xychart title "Monthly active users" x-axis [1Month, 2Month, 3Month, 4Month] y-axis "User" 0 --> 100 line [20, 38, 52, 78]
xychart
  title "Monthly active users"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "User" 0 --> 100
  line [20, 38, 52, 78]

SYNTAX

Mermaid line chart syntax

Learn the small set of Mermaid keywords that make this chart work.

SyntaxWhat it does
xychartStarts an XY chart. Use xychart horizontal when the chart should run horizontally.
x-axisDefines the ordered categories or dates used by the line.
y-axisDefines the numeric range and unit for the values.
line [values]Draws a line through one numeric value per x-axis item.
value "label"Adds an optional point label in current Mermaid versions.

The current Mermaid documentation uses xychart. Optional per-point line labels are documented for Mermaid v11.16.0 and later.

CODE EXAMPLES

More Line Chart examples

Horizontal Mermaid line chart

Use the horizontal orientation when the chart reads better from left to right across a wide range.

xychart horizontal
  title "Monthly active users"
  x-axis "Users" 0 --> 100
  y-axis [Jan, Feb, Mar, Apr]
  line [20, 38, 52, 78]
Mermaid line chart with point labels

Add quoted labels to selected line points when the milestone matters more than every value.

xychart
  title "Model size over time"
  x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023"]
  y-axis "Parameters (B)" 0 --> 600
  line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2", 7 "Mistral"]
Mermaid line and bar chart

Use a second series to compare actual values with a target or benchmark.

xychart
  title "Revenue and target"
  x-axis [Q1, Q2, Q3, Q4]
  y-axis "Revenue ($M)" 0 --> 100
  bar [25, 45, 72, 90]
  line [30, 50, 65, 85]

TROUBLESHOOTING

Common Line Chart errors

Points appear in the wrong order
Keep x-axis values chronological or otherwise naturally ordered before adding the line values.
The line has missing points
Make sure the line array has the same number of values as the x-axis categories.
A label is ignored
Point labels require a Mermaid version that supports labeled line values; remove the quoted label for older renderers.

FAQ

Frequently asked questions

What is a line chart used for?+

Line charts are useful for showing how a value changes across time or another naturally ordered sequence.

Can Mermaid line charts show multiple series?+

The XY chart syntax can represent chart values in a compact, code-based format for comparison and trend documentation.

How do I make a line chart in Mermaid?+

Start with xychart, define an ordered x-axis and numeric y-axis, then add a line array with one value for each x-axis item.

Can Mermaid combine bar and line charts?+

Yes. Add both bar and line series under the same xychart definition when the values share a meaningful scale.

Can line chart points have labels?+

Current Mermaid versions support optional quoted labels after line values. Verify the renderer version before sharing this syntax.

RELATED GUIDES

Keep exploring Mermaid charts

Mermaid XY Chart guide

Read the guide

Mermaid Bar Chart guide

Read the guide

Monthly active users template

Read the guide

TEMPLATES

Start from a related template

Monthly active users line chart

Show the growth trend of monthly active users over time.

Open template

Ready to make a Line Chart?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio