Examples · Line graph

Line graph examples

A line graph connects readings taken in order, so the slope carries the story: growing, flat, or falling. These line chart examples run on the live engine — the drawing you see is the same one an embed produces.

When to use it

  • Trends over time: users per month, temperature per day, revenue per quarter
  • Comparing the shape of two or three series against each other
  • Data with many points — a line stays readable where bars crowd

Not the right shape?

Unordered categories — connecting 'North' to 'South' with a line implies a sequence that does not exist. Use a bar chart there.

Real-world examples

Two series compared

This year against last, same axis. Two lines is a comparison; five is spaghetti — split them up before that.

Open in maker with this data

View the spec 
{
  "type": "line",
  "theme": "ink",
  "title": "Weekly orders, year over year",
  "source": "Order system",
  "data": {
    "labels": [
      "W1",
      "W2",
      "W3",
      "W4",
      "W5",
      "W6",
      "W7",
      "W8"
    ],
    "series": [
      {
        "name": "This year",
        "values": [
          310,
          340,
          335,
          360,
          392,
          405,
          430,
          452
        ]
      },
      {
        "name": "Last year",
        "values": [
          280,
          275,
          300,
          310,
          305,
          330,
          341,
          350
        ]
      }
    ]
  }
}

Line with an SLA target

The dashed target makes the one question — are we under the promised four hours? — answerable from across the room.

Open in maker with this data

View the spec 
{
  "type": "line",
  "theme": "mint",
  "title": "Median support response time (hours)",
  "source": "Helpdesk, last 10 weeks",
  "options": {
    "target": {
      "value": 4,
      "label": "SLA"
    }
  },
  "data": {
    "labels": [
      "W1",
      "W2",
      "W3",
      "W4",
      "W5",
      "W6",
      "W7",
      "W8",
      "W9",
      "W10"
    ],
    "series": [
      {
        "name": "Hours",
        "values": [
          5.2,
          4.6,
          4.9,
          4.1,
          3.8,
          3.5,
          3.9,
          3.2,
          2.9,
          3.1
        ]
      }
    ]
  }
}
Open this chart in a maker Line graph maker from scratch

Questions people ask

What does a line graph show?

How a value changes across an ordered dimension, almost always time. The reader gets two things at once: the level at any point, and the direction and speed of change between points — that second part is what bars cannot do well.

Line graph or bar chart — which one?

If the x-axis is ordered (days, months, versions), a line shows the trend. If the x-axis is a set of unordered categories, bars compare them honestly. When you're tracking a number over more than a dozen periods, the line wins on readability alone.