line-graph

html visualizing.org collected 2026-09-24 18:10:59 UTC 173,526 bytes, 79 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
6    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
8    <link rel="preconnect" href="https://fonts.googleapis.com">
9    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

vendor: 68 bytes, lines 9-10

9
10    <script async src="https://www.googletagmanager.com/gtag/js?id=

10G-7X3VRNKD7K

vendor: 16 bytes, lines 10-11

10"></script>
11

11<script>
12

vendor: 145 bytes, lines 12-15

12window.dataLayer = window.dataLayer || [];
13      function gtag(){dataLayer.push(arguments);}
14      gtag('js', new Date());
15      gtag('config', '

15G-7X3VRNKD7K

vendor: 8 bytes, lines 15-16

15');
16

16</script>

16
17    <title>Line Graph: Definition, Use Cases &amp; Examples | visualizing.org</title>
18    <meta name="description" content="Line Graph: definition, when to choose it over other time series charts, common pitfalls, real-world examples, and tools to make your own."/>
19    <meta name="robots" content="max-image-preview:large"/>
20    <meta property="og:title" content="Line Graph: Definition, Use Cases &amp; Examples | visualizing.org"/>
21    <meta property="og:description" content="Line Graph: definition, when to choose it over other time series charts, common pitfalls, real-world examples, and tools to make your own."/>
22    <meta property="og:type" content="article"/>
23    <meta property="og:url" content="https://www.visualizing.org/line-graph"/>
24    <meta property="og:site_name" content="visualizing.org"/>
25    <meta property="og:image" content="https://www.visualizing.org/opengraph.jpg"/>
26    <meta name="twitter:card" content="summary_large_image"/>
27    <meta name="twitter:title" content="Line Graph: Definition, Use Cases &amp; Examples | visualizing.org"/>
28    <meta name="twitter:description" content="Line Graph: definition, when to choose it over other time series charts, common pitfalls, real-world examples, and tools to make your own."/>
29    <meta name="twitter:image" content="https://www.visualizing.org/opengraph.jpg"/>
30    <link rel="canonical" href="https://www.visualizing.org/line-graph"/>
31

31<script type="application/ld+json" data-sitewide-schema="true">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://www.visualizing.org/#website","url":"https://www.visualizing.org","name":"visualizing.org","publisher":{"@id":"https://www.visualizing.org/#organization"},"inLanguage":"en"},{"@type":"Organization","@id":"https://www.visualizing.org/#organization","name":"visualizing.org","url":"https://www.visualizing.org","logo":{"@type":"ImageObject","@id":"https://www.visualizing.org/#logo","url":"https://www.visualizing.org/favicon.svg","contentUrl":"https://www.visualizing.org/favicon.svg"}}]}</script>

31
32

32<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://www.visualizing.org/line-graph/#webpage","url":"https://www.visualizing.org/line-graph","name":"Line Graph â The Definitive Guide","description":"The complete reference guide to line graphs: definition, anatomy, when to use, accessibility, code samples, tool-specific instructions, and the most common comparisons.","isPartOf":{"@id":"https://www.visualizing.org/#website"},"breadcrumb":{"@id":"https://www.visualizing.org/line-graph/#breadcrumb"},"mainEntity":{"@id":"https://www.visualizing.org/line-graph/#article"},"inLanguage":"en"},{"@type":"ImageObject","@id":"https://www.visualizing.org/line-graph/#hero-image","contentUrl":"https://www.visualizing.org/line-graph#hero","caption":"Example line graph","representativeOfPage":true,"width":620,"height":280},{"@type":["Article","LearningResource"],"@id":"https://www.visualizing.org/line-graph/#article","mainEntityOfPage":{"@id":"https://www.visualizing.org/line-graph/#webpage"},"headline":"Line Graph: Definition, Anatomy, Code, and When to Use","description":"A complete reference guide to line graphs â what they are, how to build one in Excel, Sheets, Python, R, JavaScript, Tableau, and Power BI, when to use them, and common mistakes to avoid.","image":{"@id":"https://www.visualizing.org/line-graph/#hero-image"},"datePublished":"2025-03-15","dateModified":"2026-04-28","publisher":{"@id":"https://www.visualizing.org/#organization"},"inLanguage":"en","educationalLevel":"beginner","learningResourceType":"reference","teaches":["How to read and interpret line graphs","When to use line graphs for time series data","How to build line charts in Excel, Google Sheets, Python, R, JavaScript, Tableau, and Power BI","How to make line graphs accessible to all readers","Common line graph mistakes and how to avoid them"],"competencyRequired":"Basic understanding of data and time","timeRequired":"PT15M","isAccessibleForFree":true,"audience":{"@type":"EducationalAudience","educationalRole":"student"},"about":{"@id":"https://www.visualizing.org/line-graph/#term"},"hasPart":[{"@id":"https://www.visualizing.org/line-graph/#howto-steps"},{"@id":"https://www.visualizing.org/line-graph/#howto-excel"},{"@id":"https://www.visualizing.org/line-graph/#howto-python"},{"@id":"https://www.visualizing.org/line-graph/#code-python"},{"@id":"https://www.visualizing.org/line-graph/#code-r"},{"@id":"https://www.visualizing.org/line-graph/#code-js"}],"keywords":["line graph","line chart","time series chart","data visualization","matplotlib line chart","ggplot2 geom_line","d3 line chart"]},{"@type":"HowTo","@id":"https://www.visualizing.org/line-graph/#howto-steps","name":"How to make a line graph","description":"Step-by-step guide to designing and shipping a line graph that communicates your data clearly.","step":[{"@type":"HowToStep","position":1,"name":"Pick the question you want the chart to answer","text":"A line chart answers âhow has this value changed over time?â Write that question down explicitly. If your question is about ranking categories, sharing a whole, or comparing distributions, switch to a different chart now â not after you have built one."},{"@type":"HowToStep","position":2,"name":"Shape the data into a continuous time series","text":"Aggregate raw events into one row per time bucket per series, with no missing dates. If a period truly has no observation, decide deliberately whether to plot zero, leave a gap, or interpolate â each tells the reader a different story."},{"@type":"HowToStep","position":3,"name":"Choose the time bucket that matches the question","text":"Daily readings reveal noise; monthly aggregates reveal trend. Hourly is great for operations, weekly for product, monthly for finance, yearly for macroeconomics. Pick the coarsest bucket that still shows the pattern you want the reader to see."},{"@type":"HowToStep","position":4,"name":"Set the value-axis range to frame the variation","text":"Unlike bars, line charts do not require a zero baseline because they encode value with position. Pick a range that lets the eye see the meaningful change without distorting it. State the chosen range clearly in the axis label so readers know what they are looking at."},{"@type":"HowToStep","position":5,"name":"Decide on markers","text":"Add round markers when each data point is meaningful and discrete (monthly KPIs, quarterly earnings). Drop them on dense series (daily or hourly readings) where they would crowd the line and obscure the trend."},{"@type":"HowToStep","position":6,"name":"Use direct labels instead of a legend","text":"Place each seriesâ name at the end of its own line in the same color as the line. The readerâs eye no longer has to ping-pong between a separate legend box and the lines themselves â a small change that meaningfully reduces cognitive load."},{"@type":"HowToStep","position":7,"name":"Annotate the moments that matter","text":"Mark the launch, the policy change, the recession with a small vertical reference line and a one-line caption. Annotations turn a line chart from a wiggle into a story. They are the cheapest way to add value to a time series."},{"@type":"HowToStep","position":8,"name":"Treat the most recent point as the headline","text":"Print the latest value next to the right edge of the line and tint the final segment in the accent color. Most readers want to know âwhere are we now?â â the chart should answer that question without a tooltip."},{"@type":"HowToStep","position":9,"name":"Add a takeaway title and ship","text":"Lead with the conclusion (âActive users tripled in 2025â) and use the descriptive label as a subtitle (âMonthly active users, JanâDec 2025â). Confirm the chart still reads at the size your audience will see it on â dashboard t

32ile, slide, or mobile column."}]},{"@type":"DefinedTerm","@id":"https://www.visualizing.org/line-graph/#term","name":"Line Graph","description":"A data visualization chart type that connects ordered data points with line segments to show how a value changes over a continuous interval, almost always time.","inDefinedTermSet":{"@id":"https://www.visualizing.org/chart-types/#termset"},"termCode":"line-graph","url":"https://www.visualizing.org/line-graph","sameAs":"https://en.wikipedia.org/wiki/Line_chart"},{"@type":"DefinedTermSet","@id":"https://www.visualizing.org/chart-types/#termset","name":"Data Visualization Chart Types","url":"https://www.visualizing.org/chart-types"},{"@type":"BreadcrumbList","@id":"https://www.visualizing.org/line-graph/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.visualizing.org"},{"@type":"ListItem","position":2,"name":"Chart Types","item":"https://www.visualizing.org/chart-types"},{"@type":"ListItem","position":3,"name":"Time series","item":"https://www.visualizing.org/chart-types#time-series"},{"@type":"ListItem","position":4,"name":"Line graph"}]},{"@type":"HowTo","@id":"https://www.visualizing.org/line-graph/#howto-excel","name":"Make a line chart in Microsoft Excel","description":"Build a clean line chart in Excel by laying out time on the left and values on the right, inserting a Line chart, and polishing the axes, title, and data labels.","totalTime":"PT3M","tool":["Microsoft Excel"],"step":[{"@type":"HowToStep","position":1,"name":"Lay out the data","text":"Put dates in column A and the numeric values in column B, with a header row."},{"@type":"HowToStep","position":2,"name":"Select the range","text":"Highlight both columns including the headers."},{"@type":"HowToStep","position":3,"name":"Insert the chart","text":"Choose Insert â Charts â Line, picking either Line or Line with Markers depending on data density."},{"@type":"HowToStep","position":4,"name":"Polish","text":"Right-click the value axis to set sensible bounds (zero is optional, not required), add a chart title that states the takeaway, and label the most recent point."}]},{"@type":"HowTo","@id":"https://www.visualizing.org/line-graph/#howto-python","name":"Make a line chart in Python with Matplotlib","description":"Build a basic line chart in Python using Matplotlib by preparing two parallel sequences â dates and values â plotting them with plt.plot, and labeling the axes.","totalTime":"PT5M","tool":["Python 3","Matplotlib"],"step":[{"@type":"HowToStep","position":1,"name":"Install Matplotlib","text":"Run pip install matplotlib in your environment so the plotting library is available."},{"@type":"HowToStep","position":2,"name":"Prepare your data","text":"Create two parallel sequences: one of dates (or any continuous variable) and one of numeric values measured at those dates."},{"@type":"HowToStep","position":3,"name":"Call plt.plot","text":"Pass the dates and values to plt.plot() to draw the connected line, then add markers if individual points carry meaning."},{"@type":"HowToStep","position":4,"name":"Label and style","text":"Add axis labels with units, a takeaway-style title, optional annotations for the most recent value, and call plt.tight_layout() before showing or saving the figure."}]},{"@type":"SoftwareSourceCode","@id":"https://www.visualizing.org/line-graph/#code-python","name":"Line chart with Matplotlib","programmingLanguage":"Python","codeRepository":"https://www.visualizing.org/line-graph/#code-examples","codeSampleType":"code snippet","runtimePlatform":"Python 3 with Matplotlib"},{"@type":"SoftwareSourceCode","@id":"https://www.visualizing.org/line-graph/#code-r","name":"Line chart with ggplot2","programmingLanguage":"R","codeRepository":"https://www.visualizing.org/line-graph/#code-examples","codeSampleType":"code snippet","runtimePlatform":"R with ggplot2"},{"@type":"SoftwareSourceCode","@id":"https://www.visualizing.org/line-graph/#code-js","name":"Line chart with D3.js","programmingLanguage":"JavaScript","codeRepository":"https://www.visualizing.org/line-graph/#code-examples","codeSampleType":"code snippet","runtimePlatform":"Browser with D3.js v7"},{"@type":"FAQPage","@id":"https://www.visualizing.org/line-graph/#faq","mainEntity":[{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-1","name":"What is a line graph?","acceptedA

32nswer":{"@type":"Answer","text":"A line graph (also called a line chart) displays data points connected by straight line segments along a continuous axis â almost always time. It is one of the oldest and most intuitive ways to show how a value rises, falls, or holds steady from one moment to the next."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-2","name":"When should you use a line graph?","acceptedAnswer":{"@type":"Answer","text":"Use a line graph whenever the question is about change over a continuous interval: how revenue moved month by month, how temperature evolved through the day, how a stock price drifted across the year. Lines work especially well when you have many time points and want the eye to track the trajectory rather than read individual values."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-3","name":"When should you avoid a line graph?","acceptedAnswer":{"@type":"Answer","text":"Avoid a line graph when categories have no natural order â use a bar chart. Skip it when you only have two or three points, when there are large gaps in the time series, when more than five series would crowd the canvas, or when you need to show parts of a whole."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-4","name":"What is the difference between a line graph and a bar chart?","acceptedA

32nswer":{"@type":"Answer","text":"A line graph encodes value with the vertical position of a connected point and is built for continuous, ordered data such as time. A bar chart encodes value with the length of a discrete rectangle and is built for unordered categorical comparisons. The same dataset usually has only one right answer between the two."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-5","name":"Does a line graph axis have to start at zero?","acceptedAnswer":{"@type":"Answer","text":"No. Unlike a bar chart, a line graph encodes value with position, not length, so a non-zero baseline does not visually exaggerate the data. Pick a value range that frames the variation you want the reader to notice, while keeping the scale honest. Always label the axis so readers can see what range you chose."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-6","name":"What is the difference between a line graph and an area chart?","acceptedAnswer":{"@type":"Answer","text":"A line graph draws only the line; an area chart fills everything between the line and the baseline. Use a single line when the trend is the headline. Use an area chart when the magnitude beneath the line carries meaning â for example, total accumulated value or how multiple stacked categories add up to a whole."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-7","name":"How many lines should one line chart show?","acceptedA

32nswer":{"@type":"Answer","text":"Keep it to about four or five at most. Beyond that, lines start to overlap into what designers call a âspaghetti chart.â When you genuinely need to compare many series, use small multiples (one mini line chart per series, faceted on a grid) so each trend gets its own panel."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-8","name":"Should a line graph use markers?","acceptedAnswer":{"@type":"Answer","text":"Use markers when each data point is meaningful and you want readers to read or hover over individual values â monthly KPIs, weekly cohorts, quarterly earnings. Drop them when the data is dense (daily or hourly readings) so the markers do not crowd the line and obscure the shape of the trend."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-9","name":"What is the difference between a line graph and a slope chart?","acceptedAnswer":{"@type":"Answer","text":"A slope chart is a deliberately stripped-down line chart with only two time points and one line per category, used to compare the change between two snapshots across many entities. A regular line chart shows the full trajectory through time and usually has fewer lines but more time points."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-10","name":"What category of chart is a line graph?","acceptedA

32nswer":{"@type":"Answer","text":"Line Graph belongs to the Time Series family of charts. Charts in that family answer questions about change, trend, and continuity through time, so they often work as alternatives when a particular line chart variant doesnât quite fit your data."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-11","name":"How do you read a line graph?","acceptedAnswer":{"@type":"Answer","text":"Start with the title, the units on the value axis, and the time range on the horizontal axis. Step back and follow the overall direction â rising, falling, flat â then look for inflection points, peaks, and troughs. Finish by checking the slope around any annotation or callout the author has made."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-12","name":"Can a line graph show forecasts?","acceptedAnswer":{"@type":"Answer","text":"Yes. The standard convention is to draw historical data with a solid line and the forecast with a dashed line of the same color, with a shaded confidence band around the forecast. Mark the present-day boundary with a vertical reference line and label it âNowâ or with the date."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-13","name":"Can blind readers explore a line graph?","acceptedA

32nswer":{"@type":"Answer","text":"Yes â line charts are one of the easiest chart types to make accessible. Provide a text alternative that summarizes the trend, expose the underlying values in a navigable table, and consider sonifying the line so screen-reader users can hear the trajectory using tools such as the SAS Graphics Accelerator or open-source web sonification libraries."}},{"@type":"Question","@id":"https://www.visualizing.org/line-graph/#faq-14","name":"Whatâs the best library for building line charts in code?","acceptedAnswer":{"@type":"Answer","text":"For static publication-quality lines, Matplotlib (Python) and ggplot2 (R) remain the standard. For interactive web charts, D3.js gives the most control while Chart.js, Recharts, Plotly, ECharts, and Observable Plot all get you to a working line chart in fewer lines than D3."}}]}]}</script>

32
33

33<script type="module" crossorigin src="/assets/index-D0o2Sutv.js"></script>

33
34    <link rel="modulepreload" crossorigin href="/assets/vendor-react-CVijXI0n.js">
35    <link rel="stylesheet" crossorigin href="/assets/index-0Gp6bb_A.css">
36

36<script>window.__VIZ_ROUTE_STATUS__="ok";</script>

36</head>
37  <body>
38    <div id="root"><div class="min-h-screen bg-[var(--bg)] text-[var(--ink)] font-sans selection:bg-[var(--accent-light)] selection:text-[var(--accent-color)]"><nav class="sticky top-0 z-50 bg-[var(--bg)]/90 backdrop-blur-md border-b border-[var(--border-color)] px-6 md:px-12 flex items-center justify-between h-[60px]" data-testid="nav-bar"><a data-testid="link-logo" href="/" class="font-serif text-[18px] font-semibold tracking-[-0.02em] text-[var(--ink)] no-underline">visualizing<span class="text-[var(--accent-color)]">.org</span></a><ul class="hidden md:flex items-center gap-8 list-none m-0 p-0" data-testid="nav-links"><li><a href="/#chart-types" class="text-[13px] font-normal text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 tracking-[0.01em]" data-testid="link-nav-chart-types">Chart Types</a></li><li><a href="/#features" class="text-[13px] font-normal text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 tracking-[0.01em]" data-testid="link-nav-concepts">Concepts</a></li><li><a href="/#features" class="text-[13px] font-normal text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 tracking-[0.01em]" data-testid="link-nav-examples">Examples</a></li><li><a href="/#chart-types" class="text-[13px] font-normal text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 tracking-[0.01em]" data-testid="link-nav-glossary">Glossary</a></li><li><a href="/#chart-types" class="bg-[var(--ink)] text-white px-[18px] py-[8px] rounded-[4px] text-[13px] font-medium hover:bg-[#333] transition-colors duration-150" data-testid="link-nav-cta">Get started â</a></li></ul></nav><main><div class="border-b border-[var(--border-color)] bg-[var(--bg-card)]"><div class="max-w-[1100px] mx-auto px-6 md:px-12 flex items-center gap-2 h-[44px] font-mono text-[12px] text-[var(--ink-faint)] flex-wrap"><span class="contents"><a href="/" class="text-[var(--ink-muted)] no-underline hover:text-[var(--accent-color)] transition-colors duration-150">Home</a></span><span class="contents"><span>/</span><a href="/chart-types" class="text-[var(--ink-muted)] no-underline hover:text-[var(--accent-color)] transition-colors duration-150">Chart Types</a></span><span class="contents"><span>/</span><a href="/chart-types#time-series" class="text-[var(--ink-muted)] no-underline hover:text-[var(--accent-color)] transition-colors duration-150">Time series</a></span><span class="contents"><span>/</span><span class="text-[var(--ink)]">Line graph</span></span></div></div><div class="max-w-[1100px] mx-auto px-6 md:px-12"><div class="py-[56px] pb-[48px] border-b border-[var(--border-color)]"><div class="flex items-center gap-3 mb-5"><span class="font-mono text-[10px] tracking-[0.12em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[10px] py-[4px] rounded-[3px] font-medium">Time Series</span><span class="font-mono text-[10px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-[4px] rounded-[3px]">Beginner</span></div><h1 class="font-serif text-[42px] md:text-[52px] font-normal tracking-[-0.025em] leading-[1.1] text-[var(--ink)] mb-4">Line Graph</h1><p class="text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[680px]">A chart that connects ordered data points with line segments to show how a value changes over time. The default chart for trends, cycles, and continuous data, with a 240-year track record across science, finance, and journalism.</p></div><div class="grid grid-cols-1 md:grid-cols-[1fr_280px] gap-16 pt-12 items-start"><div class="min-w-0"><section class="py-14 border-b border-[var(--border-color)]" id="the-chart"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->01<!-- --> â <!-- -->The chart</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">What it looks like</h2><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8 mb-2"><div class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-6 flex justify-between items-center"><span>Example â <em class="not-italic text-[var(--accent-color)] font-medium">Monthly active users</em></span><span>Jan â Jun 2025</span></div><svg viewBox="0 0 620 280" xmlns="http://www.w3.org/2000/svg" class="w-full block" role="img" aria-label="Line chart showing monthly active users from January to June 2025: 18k, 26k, 22k, 39k, 63k, then 92k highlighted

38with a +667% growth callout."><line x1="72" y1="20" x2="72" y2="235" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.10"></line><line x1="72" y1="65" x2="600" y2="65" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="72" y1="105" x2="600" y2="105" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="72" y1="145" x2="600" y2="145" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="72" y1="185" x2="600" y2="185" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="72" y1="235" x2="600" y2="235" stroke="#1a1a18" stroke-width="1" stroke-opacity="0.15"></line><text x="62" y="24" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">100k</text><text x="62" y="68" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">80k</text><text x="62" y="108" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">60k</text><text x="62" y="148" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">40k</text><text x="62" y="188" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">20k</text><text x="62" y="238" text-anchor="end" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">0</text><polyline points="100,195 188,170 276,180 364,138 452,85 540,55" fill="none" stroke="#c94a2e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline><circle cx="100" cy="195" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="188" cy="170" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="276" cy="180" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="364" cy="138" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="452" cy="85" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="540" cy="55" r="5" fill="#c94a2e" stroke="#c94a2e" stroke-width="2"></circle><circle cx="540" cy="55" r="9" fill="none" stroke="#c94a2e" stroke-width="1" stroke-opacity="0.3"></circle><text x="100" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">Jan</text><text x="188" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">Feb</text><text x="276" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">Mar</text><text x="364" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">Apr</text><text x="452" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">May</text><text x="540" y="252" text-anchor="middle" fill="#b0b0aa" font-size="11" font-family="DM Mono, monospace">Jun</text><text x="100" y="183" text-anchor="middle" fill="#6b6b67" font-size="11" font-family="DM Mono, monospace">12k</text><text x="540" y="42" text-anchor="middle" fill="#c94a2e" font-size="11" font-family="DM Mono, monospace" font-weight="500">92k</text><line x1="460" y1="85" x2="490" y2="60" stroke="#c94a2e" stroke-width="1" stroke-dasharray="3,2"></line><rect x="492" y="68" width="96" height="22" rx="3" fill="#c94a2e"></rect><text x="540" y="83" text-anchor="middle" fill="#fff" font-size="10" font-family="DM Mono, monospace">+667% vs Jan</text></svg><p class="text-[13px] text-[var(--ink-muted)] text-center italic mt-4">A line chart showing rapid growth in monthly active users. The highlighted endpoint and annotation focus the reader on the latest value and total change.</p></div></section><section class="py-14 border-b border-[var(--border-color)]" id="what-is-it"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->02<!-- --> â <!-- -->Definition</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">What is a line graph?</h2><div class="text-[16px] font-light text-[var(--ink)] leading-[1.75]"><p>

38A line graph (also called a line chart) is a chart that connects an ordered sequence of data points with straight line segments. It is one of the oldest and most intuitive ways to show how a quantity rises, falls, or holds steady from one moment to the next. The horizontal axis carries the ordered variable â almost always time â while the vertical axis carries the measured value, and the connected line traces the trajectory through the period in view.</p><p class="mt-[18px]">The job of a line chart is to make <strong class="font-medium">change visible</strong>. Each individual point would tell you only what the value was at one instant; connecting the points lets the eye read the slope, spot turning points, and judge the rate at which a quantity is moving. That is why line charts dominate financial dashboards, scientific journals, weather services, and the sports page: anything that varies over time has a line chart somewhere behind it. The line is doing two jobs at once â encoding the value with vertical position and the rate of change with the angle between consecutive segments.</p><p class="mt-[18px]">Unlike a bar chart, a line chart does not require its value axis to start at zero. Because the encoding is position rather than length, a tighter range that frames the variation does not distort the data, it just lets readers see the change more clearly. The trade-off is that line charts assume the gaps between observations are meaningful: connecting two points implies the variable plausibly took intermediate values between them. Use a line when that assumption holds; if it doesnât (categorical comparisons, sparse irregular events, parts of a whole) reach for a different chart type.</p><p class="mt-[18px]">The price of the line chartâs power is restraint. Beyond about five overlapping series, the canvas turns into a tangle that designers call a spaghetti chart and no one can read. Beyond about three or four well-chosen annotations, the eye loses the focal point. The rest of this guide is about how to live inside the line chartâs sweet spot â the range of data, density, and storytelling intent in which it consistently outperforms every alternative.</p></div><div class="bg-[var(--accent-light)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-4 mt-6"><p class="text-[14px] text-[var(--ink)] leading-[1.65] font-light"><strong class="font-medium text-[var(--accent-color)]">Origin:</strong> Scottish engineer William Playfair pioneered the time-series line chart in 1786, plotting Englandâs imports, exports, and national debt over the eighteenth century in <em>The Commercial and Political Atlas</em>. He argued that âmaking an appeal to the eye when proportion and magnitude are concerned is the best and readiest method of conveying a distinct ideaâ â and the line chart has been the default time-series visualization ever since.</p></div></section><section class="py-14 border-b border-[var(--border-color)]" id="when-to-use"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->03<!-- --> â <!-- -->When to use</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">When a line graph is the right call</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Reach for a line graph whenever the question is about change over a continuous interval and connecting the dots tells the truth. Below are the situations where it consistently wins against the alternatives.</p><div class="bg-[var(--green-light)] border border-[var(--green-border)] rounded-[10px] p-6 mt-7"><div class="flex items-center gap-2 font-medium text-[14px] text-[var(--green)] mb-4"><span class="w-[22px] h-[22px] rounded-full bg-[var(--green)] text-white flex items-center justify-center text-[12px] shrink-0">&amp;check;</span>Use a line graph whenâ¦</div><ul class="flex flex-col gap-[10px] list-none"><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You are showing how a value changes over a continuous time interval (days, months, years)</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You have many time points â lines handle density better than bars</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You want to emphasize the direction and rate of change (rising, falling, plateauing)</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You need to compare 2â5 trends on the same axis at the same time</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You are highlighting cycles, seasonality, or turning points the reader needs to spot</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You want to show a forecast continuing from observed data</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Your axis can be tighter than zero without distorting the meaning</li></ul></div></section><section class="py-14 border-b border-[var(--border-color)]" id="when-not-to-use"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->04<!-- --> â <!-- -->When not to use</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">

38When a line graph is the wrong call</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">A line chart can technically display almost any ordered data, but âtechnically possibleâ is not the same as âgood idea.â Below are the cases where a line actively misleads the reader.</p><div class="bg-[var(--red-light)] border border-[var(--red-border)] rounded-[10px] p-6 mt-7"><div class="flex items-center gap-2 font-medium text-[14px] text-[var(--red)] mb-4"><span class="w-[22px] h-[22px] rounded-full bg-[var(--red)] text-white flex items-center justify-center text-[12px] shrink-0">Ã</span>Avoid a line graph whenâ¦</div><ul class="flex flex-col gap-[10px] list-none"><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Your data is categorical with no inherent order â use a bar chart instead</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You only have two or three points; the eye sees a slope where there is no real trend</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Time has large irregular gaps; connecting across gaps invents data the reader canât verify</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">You need to show parts of a whole â use a stacked area chart, treemap, or pie chart</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">More than five series share one canvas â switch to small multiples</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Each value depends on something other than time and the relationship is not monotonic â a scatter plot reveals the structure better</li><li class="text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">The audience needs to compare exact period-to-period values â a small bar chart is easier to read</li></ul></div></section><section class="py-14 border-b border-[var(--border-color)]" id="data-requirements"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->05<!-- --> â <!-- -->Data requirements</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">What your data needs to look like</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Before building the chart, your dataset needs to fit a specific shape. Use this checklist to confirm yours does.</p><div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-7"><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><p class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-2">Shape</p><p class="text-[14px] text-[var(--ink)] font-light leading-[1.55]">One row per (time, series) combination, sorted by time.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><p class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-2">Minimum rows</p><p class="text-[14px] text-[var(--ink)] font-light leading-[1.55]">At least 4 ordered points per series so a trend is visible (3 is the absolute floor).</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><p class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-2">Maximum rows</p><p class="text-[14px] text-[var(--ink)] font-light leading-[1.55]">Hundreds of points per series are fine; keep the number of series to 2â5 to avoid spaghetti charts.</p></div></div><div class="mt-6 border border-[var(--border-color)] rounded-[10px] overflow-hidden"><div class="bg-[var(--bg-alt)] px-[18px] py-[12px] font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-muted)]">Required fields</div><div class="bg-[var(--bg-card)] border-t border-[var(--border-color)] px-[18px] py-[14px] flex flex-col md:flex-row md:items-start gap-2 md:gap-6"><div class="md:w-[180px] shrink-0 flex items-center gap-2"><span class="text-[14px] font-medium text-[var(--ink)]">time</span><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[6px] py-[2px] rounded-[3px]">required</span></div><div class="md:w-[140px] shrink-0"><span class="font-mono text-[11px] text-[var(--ink-muted)]">date / number (continuous)</span></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6] flex-1">The independent variable plotted on the horizontal axis. Almost always time â dates, timestamps, or years â but can be any ordered continuous quantity such as distance, temperature, or experimental dose.</p></div><div class="bg-[var(--bg-card)] border-t border-[var(--border-color)] px-[18px] py-[14px] flex flex-col md:flex-row md:items-start gap-2 md:gap-6"><div class="md:w-[180px] shrink-0 flex items-center gap-2"><span class="text-[14px] font-medium text-[var(--ink)]">value</span><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[6px] py-[2px] rounded-[3px]">required</span></div><div class="md:w-[140px] shrink-0"><span class="font-mono text-[11px] text-[var(--ink-muted)]">number (continuous)</span></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6] flex-1">The dependent variable plotted on the vertical axis. Must share a single unit across rows (revenue in USD, temperature in Â°C, count of users) so the lineâs slope is meaningful.</p></div><div class="bg-[var(--bg-card)] border-t border-[var(--border-color)] px-[18px] py-[14px] flex flex-col md:flex-row md:items-start gap-2 md:gap-6"><div class="md:w-[180px] shrink-0 flex items-center gap-2"><span class="text-[14px] font-medium text-[var(--ink)]">series</span></div><div class="md:w-[140px] shrink-0"><span class="font-mono text-[11px] text-[var(--ink-muted)]">string (optional)</span></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6] flex-1">Optional grouping field for multi-line charts. Each unique value becomes its own line. Keep the number of series to twoâfive so the chart does not turn into a spaghetti chart.</p></div><div class="bg-[var(--bg-card)] border-t border-[var(--border-color)] px-[18px] py-[14px] flex flex-col md:flex-row md:items-start gap-2 md:gap-6"><div class="md:w-[180px] shrink-0 flex items-center gap-2"><span class="text-[14px] font-medium text-[var(--ink)]">is_forecast</span></div><div class="md:w-[140px] shrink-0"><span class="font-mono text-[11px] text-[var(--ink-muted)]">boolean (optional)</span></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6] flex-1">Optional flag separating historical observations from forecast values. Use it to switch the line style from solid (history) to dashed (forecast) and to draw a confidence band only around forecast points.</p></div></div><div class="mt-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden"><div class="bg-[var(--bg-alt)] px-[18px] py-[12px] font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-muted)]">Example data</div><div class="overflow-x-auto"><table class="w-full text-[13px]"><thead><tr class="border-t border-[var(--border-color)]"><th class="text-left px-[18px] py-[10px] font-mono text-[11px] text-[var(--ink-faint)] uppercase tracking-[0.05em]">month</th><th class="text-left px-[18px] py-[10px] font-mono text-[11px] text-[var(--ink-faint)] uppercase tracking-[0.05em]">series</th><th class="text-left px-[18px] py-[10px] font-mono text-[11px] text-[var(--ink-faint)] uppercase tracking-[0.05em]">value</th></tr></thead><tbody><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-01-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">18,400</td></tr><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-02-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">26,100</td></tr><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-03-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">22,300</td></tr><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-04-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">38,500</td></tr><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-05-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">62,700</td></tr><tr class="border-t border-[var(--border-color)]"><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">2025-06-01</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">Active users</td><td class="px-[18px] py-[10px] text-[var(--ink)] font-light">92,400</td></tr></tbody></table></div></div><div class="bg-[var(--accent-light)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-4 mt-6"><p class="text-[14px] text-[var(--ink)] leading-[1.65] font-light"><strong class="font-medium text-[var(--accent-color)]">Tip:</strong> store dates as real <em>Date</em> objects (not strings) so your tool produces a proportional time axis where January-to-March covers twice the horizontal distance of February-to-March. String labels evenly space the ticks and silently distort the rate of change.</p></div></section><section class="py-14 border-b border-[var(--border-color)]" id="anatomy"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->06<!-- --> â <!-- -->Anatomy</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Parts of a line graph</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Five parts do all the work. Knowing what each one is for makes it easier to diagnose a chart that is misleading and to design one that isnât.</p><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8"><svg viewBox="0 0 580 260" xmlns="http://www.w3.org/2000/svg" class="w-full block" role="img" aria-label="Annotated diagram showing the parts of a line graph: value axis, time axis, the line itself, individual data points, and gridlines."><line x1="80" y1="20" x2="80" y2="215" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line><line x1="80" y1="215" x2="540" y2="215" stroke="#1a1a18" stroke-width="1.5" stroke-opacity="0.15"></line><line x1="80" y1="75" x2="540" y2="75" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="80" y1="125" x2="540" y2="125" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><line x1="80" y1="175" x2="540" y2="175" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.08" stroke-dasharray="4,3"></line><polyline points="110,180 195,145 280,155 365,90 450,65 520,80" fill="none" stroke="#c94a2e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline><circle cx="110" cy="180" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="195" cy="145" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="280" cy="155" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="365" cy="90" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><circle cx="450" cy="65" r="5" fill="#c94a2e"></circle><circle cx="520" cy="80" r="4" fill="#fff" stroke="#c94a2e" stroke-width="2"></circle><line x1="30" y1="130" x2="74" y2="130" stroke="#2e7d52" stroke-width="1.2" stroke-dasharray="3,2"></line><circle cx="30" cy="130" r="4" fill="#2e7d52"></circle><text x="26" y="118" text-anchor="middle" fill="#2e7d52" font-size="10" font-family="DM Mono, monospace">A</text><line x1="300" y1="250" x2="300" y2="220" stroke="#2e7d52" stroke-width="1.2" stroke-dasharray="3,2"></line><circle cx="300" cy="252" r="4" fill="#2e7d52"></circle><text x="300" y="268" text-anchor="middle" fill="#2e7d52" font-size="10" font-family="DM Mono, monospace">B</text><line x1="225" y1="135" x2="240" y2="105" stroke="#c94a2e" stroke-width="1.2"></line><circle cx="240" cy="100" r="4" fill="#c94a2e"></circle><text x="240" y="92" text-anchor="middle" fill="#c94a2e" font-size="10" font-family="DM Mono, monospace">C</text><line x1="450" y1="65" x2="475" y2="40" stroke="#6b6b67" stroke-width="1.2"></line><circle cx="475" cy="38" r="4" fill="#6b6b67"></circle><text x="490" y="38" fill="#6b6b67" font-size="10" font-family="DM Mono, monospace">D</text>

38<line x1="540" y1="175" x2="556" y2="165" stroke="#6b6b67" stroke-width="1.2"></line><circle cx="556" cy="163" r="4" fill="#6b6b67"></circle><text x="562" y="160" fill="#6b6b67" font-size="10" font-family="DM Mono, monospace">E</text></svg><div class="flex flex-wrap gap-3 mt-7"><div class="flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]"><span class="w-[10px] h-[10px] rounded-full shrink-0" style="background:#2e7d52"></span><span class="text-[var(--ink-muted)]"><strong class="text-[var(--ink)] font-medium">A â Y-axis (value axis):</strong> <!-- -->The vertical scale showing the measured quantity. Range is chosen to frame the variation; zero is optional, not required.</span></div><div class="flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]"><span class="w-[10px] h-[10px] rounded-full shrink-0" style="background:#2e7d52"></span><span class="text-[var(--ink-muted)]"><strong class="text-[var(--ink)] font-medium">B â X-axis (time axis):</strong> <!-- -->The horizontal axis representing the continuous interval, almost always time, with proportional spacing between ticks.</span></div><div class="flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]"><span class="w-[10px] h-[10px] rounded-full shrink-0" style="background:#c94a2e"></span><span class="text-[var(--ink-muted)]"><strong class="text-[var(--ink)] font-medium">C â The line:</strong> <!-- -->Connects ordered data points and encodes both the value (height) and the rate of change (slope between segments).</span></div><div class="flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]"><span class="w-[10px] h-[10px] rounded-full shrink-0" style="background:#6b6b67"></span><span class="text-[var(--ink-muted)]"><strong class="text-[var(--ink)] font-medium">D â Data point:</strong> <!-- -->Individual marker at an observed value. Optional â add for sparse series, drop for dense ones.</span></div><div class="flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]"><span class="w-[10px] h-[10px] rounded-full shrink-0" style="background:#6b6b67"></span><span class="text-[var(--ink-muted)]"><strong class="text-[var(--ink)] font-medium">E â Gridlines:</strong> <!-- -->Faint horizontal reference lines that help the eye decode values without overwhelming the line.</span></div></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="step-by-step"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->07<!-- --> â <!-- -->Step-by-step</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Step-by-step: how to build a good line graph</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">A nine-step recipe that works regardless of the tool. Walk through it the first few times and the moves become automatic; skip steps and the chart usually shows it.</p><ol class="flex flex-col gap-5 mt-7 list-none p-0"><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">1</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Pick the question you want the chart to answer</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">A line chart answers âhow has this value changed over time?â Write that question down explicitly. If your question is about ranking categories, sharing a whole, or comparing distributions, switch to a different chart now â not after you have built one.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">2</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Shape the data into a continuous time series</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Aggregate raw events into one row per time bucket per series, with no missing dates. If a period truly has no observation, decide deliberately whether to plot zero, leave a gap, or interpolate â each tells the reader a different story.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">3</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Choose the time bucket that matches the question</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Daily readings reveal noise; monthly aggregates reveal trend. Hourly is great for operations, weekly for product, monthly for finance, yearly for macroeconomics. Pick the coarsest bucket that still shows the pattern you want the reader to see.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">4</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Set the value-axis range to frame the variation</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Unlike bars, line charts do not require a zero baseline because they encode value with position. Pick a range that lets the eye see the meaningful change without distorting it. State the chosen range clearly in the axis label so readers know what they are looking at.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">5</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Decide on markers</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Add round markers when each data point is meaningful and discrete (monthly KPIs, quarterly earnings). Drop them on dense series (daily or hourly readings) where they would crowd the line and obscure the trend.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">6</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Use direct labels instead of a legend</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Place each seriesâ name at the end of its own line in the same color as the line. The readerâs eye no longer has to ping-pong between a separate legend box and the lines themselves â a small change that meaningfully reduces cognitive load.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">7</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Annotate the moments that matter</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Mark the launch, the policy change, the recession with a small vertical reference line and a one-line caption. Annotations turn a line chart from a wiggle into a story. They are the cheapest way to add value to a time series.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">8</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Treat the most recent point as the headline</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Print the latest value next to the right edge of the line and tint the final segment in the accent color. Most readers want to know âwhere are we now?â â the chart should answer that question without a tooltip.</div></div></li><li class="flex gap-5 items-start"><span class="w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]">9</span><div class="flex-1 min-w-0"><h4 class="text-[15px] font-medium text-[var(--ink)] mb-1">Add a takeaway title and ship</h4><div class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">Lead with the conclusion (âActive users tripled in 2025â) and use the descriptive label as a subtitle (âMonthly active users, JanâDec 2025â). Confirm the chart still reads at the size your audience will see it on â dashboard t

38ile, slide, or mobile column.</div></div></li></ol></section><section class="py-14 border-b border-[var(--border-color)]" id="real-world-examples"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->08<!-- --> â <!-- -->Real-world examples</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Where youâll see line graphs used</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Line charts show up everywhere a quantity changes through time â finance, science, product analytics, journalism. Each context has its own conventions, and they all reward the same fundamentals.</p><div class="flex flex-col gap-5 mt-7"><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start"><span class="font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1">01</span><div><h4 class="text-[15px] font-medium text-[var(--ink)] mb-[6px]">Finance: Stock price over a trading session</h4><p class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">A brokerage app shows a single instrumentâs price as a line from market open to close, often layered with a faint area fill to emphasize gains and losses against the previous close. The axis is tight to the dayâs range, the close price is direct-labelled, and tooltips on tap reveal exact values at a chosen minute.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]">Finance</span></div></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start"><span class="font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1">02</span><div><h4 class="text-[15px] font-medium text-[var(--ink)] mb-[6px]">Public health: Daily case counts during an outbreak</h4><p class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">A national dashboard plots seven-day rolling case counts as a line per region. Solid lines show observed values; a dashed segment beyond ânowâ shows the model forecast with a shaded confidence band. Annotations mark policy changes â mask mandates, school closures â with vertical reference lines.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]">Public health</span></div></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start"><span class="font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1">03</span><div><h4 class="text-[15px] font-medium text-[var(--ink)] mb-[6px]">Product analytics: Daily active users</h4><p class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">A product manager watches a multi-line chart of daily active users split by acquisition channel. Each series uses a different color and a direct end-of-line label so the legend never has to be consulted. A vertical reference line marks the v2 launch, with a one-line caption explaining the post-launch jump.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]">Product analytics</span></div></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 grid grid-cols-[48px_1fr] gap-4 items-start"><span class="font-serif text-[32px] font-semibold text-[var(--accent-mid)] leading-none mt-1">04</span><div><h4 class="text-[15px] font-medium text-[var(--ink)] mb-[6px]">Journalism: Climate temperature anomalies</h4><p class="text-[14px] font-light text-[var(--ink-muted)] leading-[1.65]">A news graphic plots monthly temperature anomalies as a single line over more than a century, with horizontal reference lines for the 1.5Â°C and 2Â°C thresholds. The tone of the line shifts from cool to warm along its length to reinforce the trend without depending on a separate legend.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-2 py-[3px] rounded-[3px]">Journalism</span></div></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="variations"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->09<!-- --> â <!-- -->Variations</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Types of line graphs</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">The basic line chart has several important variants. The headline rule is the same as ever: pick the variant whose strengths match your question.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7"><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><div class="h-[60px] mb-3 flex items-end gap-[6px]"><svg viewBox="0 0 120 60" width="120" height="60"><polyline points="6,46 26,38 46,42 66,22 86,30 110,12" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline><polyline points="6,52 26,46 46,40 66,38 86,28 110,30" fill="none" stroke="#1a1a18" stroke-width="2" stroke-opacity="0.55" stroke-linecap="round" stroke-linejoin="round"></polyline><line x1="0" y1="58" x2="120" y2="58" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.2"></line></svg></div><p class="text-[13px] font-medium text-[var(--ink)] mb-1">Multi-series line chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">

38Two or more lines on a shared axis to compare trends side by side. Limit to 2â5 series and use direct end-of-line labels.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><div class="h-[60px] mb-3 flex items-end gap-[6px]"><svg viewBox="0 0 120 60" width="120" height="60"><polyline points="6,42 24,42 24,30 44,30 44,36 64,36 64,18 84,18 84,24 110,24" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linejoin="round"></polyline><line x1="0" y1="58" x2="120" y2="58" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.2"></line></svg></div><p class="text-[13px] font-medium text-[var(--ink)] mb-1">Step line chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Holds the value flat between observations and changes only at the moment of a new reading. Right when intermediate values do not exist (price changes, threshold crossings).</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><div class="h-[60px] mb-3 flex items-end gap-[6px]"><svg viewBox="0 0 120 60" width="120" height="60"><polyline points="6,46 30,38 56,42 80,22" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline><polyline points="80,22 96,18 110,16" fill="none" stroke="#c94a2e" stroke-width="2" stroke-dasharray="3,3" stroke-linecap="round" stroke-linejoin="round"></polyline><path d="M 80 22 L 96 14 L 110 10 L 110 22 L 96 22 L 80 22 Z" fill="#c94a2e" fill-opacity="0.12"></path><line x1="80" y1="6" x2="80" y2="58" stroke="#999" stroke-width="0.5" stroke-dasharray="3,2"></line><line x1="0" y1="58" x2="120" y2="58" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.2"></line></svg></div><p class="text-[13px] font-medium text-[var(--ink)] mb-1">Forecast line chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Solid line for observed history, dashed continuation for the forecast, with a shaded confidence band and a vertical reference line for âNow.â</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5"><div class="h-[60px] mb-3 flex items-end gap-[6px]"><svg viewBox="0 0 120 60" width="120" height="60"><line x1="20" y1="20" x2="100" y2="42" stroke="#c94a2e" stroke-width="2" stroke-linecap="round"></line><line x1="20" y1="36" x2="100" y2="14" stroke="#1a1a18" stroke-width="2" stroke-opacity="0.55" stroke-linecap="round"></line><line x1="20" y1="6" x2="20" y2="56" stroke="#999" stroke-width="0.5"></line><line x1="100" y1="6" x2="100" y2="56" stroke="#999" stroke-width="0.5"></line><line x1="0" y1="58" x2="120" y2="58" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.2"></line></svg></div><p class="text-[13px] font-medium text-[var(--ink)] mb-1">Slope chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Two time points only, one line per category. A stripped-down line chart for comparing change between two snapshots across many entities.</p></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="comparisons"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->10<!-- --> â <!-- -->Comparisons</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Line chart vs other chart types</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Line charts share the change-over-time territory with several neighbors. Picking the wrong one quietly changes what the reader is allowed to conclude.</p><div class="flex flex-col gap-8 mt-7"><div id="comparisons-vs-area" class="flex flex-col gap-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Line chart vs area chart</h3><p class="text-[14px] text-[var(--ink-muted)] font-light leading-[1.65]">Lines and areas use the same underlying data, but they emphasize different things. A line draws attention to the trajectory; an area draws attention to magnitude and accumulation. Choose by which one is the headline.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-1"><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--accent-mid)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Line chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Plots only the line connecting the points. Best when the rate or direction of change is the headline and several series need to be visible at once without overlap.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Trajectory is the headline</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Multiple series stay readable</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Baseline does not have to be zero</li></ul></div><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--border-color)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Area chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Fills the region between the line and a baseline. Best when the area itself carries meaning â cumulative totals or stacked composition over time.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Magnitude under the line matters</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Stacked variants show parts of a whole</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Baseline must be zero (so the area is meaningful)</li></ul></div></div></div><div id="comparisons-vs-bar-time" class="flex flex-col gap-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Line chart vs bar chart (for time)</h3><p class="text-[14px] text-[var(--ink-muted)] font-light leading-[1.65]">Both can show change over time, but the visual encoding is different and so is the question they answer best. Lines emphasize continuity and trend, bars emphasize discrete period-by-period comparison.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-1"><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--accent-mid)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Line chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Best when you have many time points and you want the eye to read the slope of the change. The connected line implies continuity between observations.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Many time points (12+)</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Trend and rate are the headline</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Multiple series compared at a glance</li></ul></div><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--border-color)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Bar chart over time</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Best for a small number of discrete periods (months in a quarter, quarters in a year) where you want exact period-to-period comparison and a zero baseline.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Few time points (under ~12)</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Each period stands on its own</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Zero baseline is required</li></ul></div></div></div><div id="comparisons-vs-slope" class="flex flex-col gap-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Line chart vs slope chart</h3><p class="text-[14px] text-[var(--ink-muted)] font-light leading-[1.65]">A slope chart is a stripped-down line chart with only two time points and one line per category. It is built to compare the change between two snapshots across many entities, not to show a full trajectory.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-1"><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--accent-mid)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Line chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Many time points per series, usually twoâfive series. The shape of the trajectory through the middle of the chart is part of the story.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Shows the full path through time</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Twoâfive series at most</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Reader can see peaks, dips, cycles</li></ul></div><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--border-color)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Slope chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Two time points only (before and after, year 1 and year 5). One line per category, often a dozen or more, ranked top to bottom by either start or end value.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Compares change between two snapshots</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Many categories, two time points</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Direct labels at both ends</li></ul></div></div></div><div id="comparisons-vs-sparkline" class="flex flex-col gap-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Line chart vs sparkline</h3><p class="text-[14px] text-[var(--ink-muted)] font-light leading-[1.65]">A sparkline is a tiny, axis-less line chart designed to sit inside a sentence, table cell, or KPI tile. It shows the shape of a trend without trying to communicate exact values.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-1"><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--accent-mid)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Line chart</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Full-size chart with axes, labels, and gridlines. Designed to be read on its own and to support multiple series, annotations, and direct value labels.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Has axes, labels, gridlines</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Designed to read independently</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">

38Supports annotations and call-outs</li></ul></div><div class="bg-[var(--bg-card)] border rounded-[10px] p-5 flex flex-col gap-3 border-[var(--border-color)]"><div class="flex items-center justify-between gap-3"><h4 class="text-[15px] font-medium text-[var(--ink)]">Sparkline</h4></div><p class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Word-sized inline line. No axes, no gridlines, sometimes a marker for the latest value. Designed to live inside another piece of content as a quick visual sense of trend.</p><ul class="flex flex-col gap-[6px] list-none p-0 mt-1"><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Tiny, axis-less inline graphic</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Communicates shape, not value</li><li class="text-[13px] text-[var(--ink)] font-light leading-[1.55] pl-3 relative before:content-[&#x27;â&#x27;] before:absolute before:left-0 before:text-[var(--ink-faint)]">Sits next to a number or label</li></ul></div></div></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="common-mistakes"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->11<!-- --> â <!-- -->Common mistakes</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Mistakes to watch out for</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Almost every broken line chart in the wild fails the same handful of ways. If you only memorize six rules, make them these.</p><div class="flex flex-col gap-4 mt-7"><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Treating dates as labels</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">If you store dates as strings, your tool will evenly space the ticks and silently distort the rate of change â a January-to-March gap will look the same width as February-to-March even though it covers twice as much time. Always store the time axis as a real Date or numeric value so the chart uses proportional spacing and the slope means what it should.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Connecting across missing data</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">When a period genuinely has no observation, drawing a straight line across the gap invents data the reader cannot verify. Either break the line, plot a marker with no connector, or interpolate explicitly with a dashed segment so readers can see what is observed and what is bridged.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Spaghetti chart with too many lines</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">Beyond about five overlapping series, lines tangle into a mess no one can decode. Drop the smaller series, group them into an âOtherâ aggregate, or switch to small multiples â one mini line chart per series â so the eye can read each trend on its own panel.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Cropping the value axis to lie about change</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">Line charts allow non-zero baselines, but cropping a tiny range to make a small movement look enormous is the time-series version of the truncated bar axis trick. Pick the tightest range that frames the variation honestly, label the bounds clearly, and resist temptation.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Smoothing into a curve that hides the data</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">A heavily smoothed spline can flatten real spikes, hide outliers, and make the line look prettier than the underlying data deserves. Default to straight segments between observed points; only switch to a curve when the underlying signal really is smooth (continuous physical measurements, fitted models with explicit uncertainty).</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Using a separate legend instead of direct labels</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">Pairing each line with a swatch in a separate legend forces the reader to bounce back and forth between the chart and the key. Place each seriesâ name at the end of its own line in the same color and the cognitive load drops noticeably â and the labels survive screenshots and crops better than legend boxes.</p></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]"><h4 class="text-[14px] font-medium text-[var(--ink)] mb-[6px]">Decorative effects: 3D, gradients, drop shadows</h4><p class="text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]">Three-dimensional ribbons, gradient fills under the line, and drop shadows shift the perceived position of the line by a few pixels and undermine the only thing it is doing: encoding a value with its he

38ight. Stick to a flat, two-dimensional line with the smallest amount of visual chrome you can get away with.</p></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="accessibility"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->12<!-- --> â <!-- -->Accessibility</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Accessibility checklist</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Run through this list before publishing. The chart should still communicate its message to readers using assistive technology, color-blind users, keyboard navigation, and reduced-motion settings.</p><ul class="flex flex-col gap-3 mt-7 list-none p-0"><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Color contrast meets WCAG AA</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.4.3</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Line color against the chart background should reach at least 3:1 contrast for graphical objects. Axis text, titles, and tooltips need 4.5:1 for body sizes, 3:1 for large text. Avoid hairline strokes; aim for a 2px line minimum at default zoom.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Do not rely on color alone to distinguish series</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.4.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">When a chart has more than one line, vary the dash pattern, marker shape, or stroke weight in addition to color. Roughly 1 in 12 men and 1 in 200 women have some form of color-vision deficiency â a red and green line look identical to many of them.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Use direct labels instead of a separate legend</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.3.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Print each seriesâ name at the end of its line in the same color as the line. Direct labels remove the need for the reader â sighted or screen-reader â to map a swatch back to a line, and they survive cropping and screenshotting better than legend boxes.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Provide a meaningful text alternative</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.1.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">

38Add an accessible name (alt text or aria-label) that summarizes the trend, not the chart type. âLine chart of monthly visitorsâ is weak; âMonthly visitors rose from 18k in January to 92k in June, with a brief dip in Marchâ is strong.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Expose the underlying data table</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.3.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Pair the chart with a screen-reader-navigable table of dates and values, either visible below the chart or hidden but reachable. Many users â sighted and not â prefer to copy the numbers rather than re-key them from the visual.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Offer a sonification (audio chart) for blind readers</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->1.1.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">For longer or more important time series, render the line as a tone whose pitch maps to the value over time â the SAS Graphics Accelerator browser extension does this for any chart with a focusable description, and the open-source Highcharts and Datawrapper sonification modes generate audio summaries directly. Audio charts let blind readers hear the trend in seconds.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Keep tooltips keyboard-accessible</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->2.1.1</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">If the chart is interactive, every data point should be reachable with the Tab key and its tooltip should appear on focus, not only on hover. Provide a visible focus ring so sighted keyboard users can track where they are along the line.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Respect prefers-reduced-motion</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->2.3.3</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">If the line draws itself in on load, gate the animation behind a prefers-reduced-motion: no-preference media query so motion-sensitive readers see the final state immediately rather than a sweeping line.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Make the chart resizable and zoomable</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->

381.4.4</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Use a responsive viewBox instead of a fixed pixel size, and make sure the chart still reads at 200% browser zoom. Increase line thickness and marker size proportionally on small screens.</div></div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex gap-4 items-start"><span class="w-[20px] h-[20px] rounded-[4px] border-[1.5px] border-[var(--accent-color)] flex items-center justify-center shrink-0 mt-[2px] text-[var(--accent-color)] font-mono text-[12px] leading-none">&amp;check;</span><div class="flex-1 min-w-0"><div class="flex flex-wrap items-center gap-2 mb-[6px]"><h4 class="text-[14px] font-medium text-[var(--ink)]">Label the value axis with units</h4><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">WCAG <!-- -->3.3.2</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">â1.2kâ is fine in display, but the axis title or a nearby caption must state what is being measured (âmonthly active usersâ) and the unit. A reader who canât see the chart still needs to know what the line represents.</div></div></li></ul></section><section class="py-14 border-b border-[var(--border-color)]" id="best-practices"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->13<!-- --> â <!-- -->Best practices</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Design and craft tips</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">The mistakes section above tells you what to avoid. The list below is the positive version: the small set of habits that separate a good line chart from a passable one.</p><div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7"><div class="rounded-[10px] p-5 border bg-[var(--green-light)] border-[var(--green-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--green)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--green)]">â</span>Do</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Set the value range to frame the variation</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Unlike bar charts, line charts encode value with position, not length, so a non-zero baseline does not exaggerate the data. Pick the tightest range that still tells the truth and label it clearly.</div></div><div class="rounded-[10px] p-5 border bg-[var(--red-light)] border-[var(--red-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--red)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--red)]">Ã</span>Donât</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Spaghetti chart with too many series</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Beyond about five lines, the chart becomes a tangle no one can read. Either drop the smaller series, group them into an âOtherâ aggregate, or switch to small multiples â one mini chart per series.</div></div><div class="rounded-[10px] p-5 border bg-[var(--green-light)] border-[var(--green-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--green)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--green)]">â</span>Do</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Use direct labels not a legend</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">

38Place each series name at the end of its line in the same color as the line. The reader stops bouncing between a legend box and the chart, and the labels survive screenshots and crops.</div></div><div class="rounded-[10px] p-5 border bg-[var(--red-light)] border-[var(--red-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--red)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--red)]">Ã</span>Donât</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Connect across missing data without saying so</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">When a period has no observation, do not silently bridge the gap. Either break the line, plot a marker with no connector, or interpolate explicitly with a dashed segment so readers see the gap.</div></div><div class="rounded-[10px] p-5 border bg-[var(--green-light)] border-[var(--green-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--green)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--green)]">â</span>Do</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Annotate the moments that matter</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Mark launches, policy changes, market events with a thin vertical rule and a one-line caption. Annotations turn a wiggle into a story and are the cheapest upgrade you can make to a time series.</div></div><div class="rounded-[10px] p-5 border bg-[var(--red-light)] border-[var(--red-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--red)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--red)]">Ã</span>Donât</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Use 3D, gradients, or drop shadows</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Decorative effects shift the perceived position of the line and undermine the only thing it is doing: encoding a value with its height above the baseline. Stick to a flat, two-dimensional line.</div></div><div class="rounded-[10px] p-5 border bg-[var(--green-light)] border-[var(--green-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--green)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--green)]">â</span>Do</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Distinguish forecast from history</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">Solid line for observed values, dashed line of the same color for the forecast, with a shaded confidence band. Mark the present-day boundary with a vertical reference line labelled âNowâ.</div></div><div class="rounded-[10px] p-5 border bg-[var(--red-light)] border-[var(--red-border)]"><div class="flex items-center gap-2 font-mono text-[10px] tracking-[0.10em] uppercase mb-2 text-[var(--red)]"><span class="w-[18px] h-[18px] rounded-full flex items-center justify-center text-white text-[11px] leading-none bg-[var(--red)]">Ã</span>Donât</div><h4 class="text-[14px] font-medium text-[var(--ink)] mb-1">Smooth a series into a curve that hides the data</h4><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.6]">A heavily smoothed spline can flatten real spikes and make the line look prettier than it deserves. Default to straight segments between observed points, and only switch to a spline when the underlying signal is itself smooth.</div></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="related-charts"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->14<!-- --> â <!-- -->Alternatives</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Related and alternative charts</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">When a line chart isnât quite right, one of these neighbors usually is. They all live in or next to the Time Series family and trade off the same handful of properties.</p><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-7"><a href="/area-chart" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><path d="M 4,52 L 20,40 L 36,46 L 52,22 L 68,28 L 84,10 L 100,16 L 100,55 L 4,55 Z" fill="#c94a2e" fill-opacity="0.25"></path><polyline points="4,52 20,40 36,46 52,22 68,28 84,10 100,16" fill="none" stroke="#c94a2e" stroke-width="2"></polyline><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Area chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When the area beneath the line carries meaning â cumulative totals or stacked composition over time.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time series</span></a><a href="/sparkline" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><polyline points="6,38 18,32 30,42 42,28 54,30 66,18 78,22 92,12" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline><circle cx="92" cy="12" r="3" fill="#c94a2e"></circle></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Sparkline</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Tiny axis-less line designed to sit inside a sentence or KPI tile. Communicates the shape of a trend, not exact values.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time series</span></a><a href="/step-line-chart" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><polyline points="4,42 22,42 22,30 42,30 42,36 62,36 62,18 82,18 82,24 100,24" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linejoin="round"></polyline><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Step chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">

38When the value holds steady between observations and only jumps at discrete events â prices, interest rates, threshold changes.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time series</span></a><a href="/slope-chart" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><line x1="20" y1="14" x2="80" y2="46" stroke="#c94a2e" stroke-width="2"></line><line x1="20" y1="36" x2="80" y2="20" stroke="#c94a2e" stroke-width="2" stroke-opacity="0.6"></line><line x1="20" y1="48" x2="80" y2="36" stroke="#c94a2e" stroke-width="2" stroke-opacity="0.4"></line><line x1="20" y1="6" x2="20" y2="56" stroke="#999" stroke-width="0.5"></line><line x1="80" y1="6" x2="80" y2="56" stroke="#999" stroke-width="0.5"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Slope chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Two snapshots, many categories â a stripped-down line chart for comparing rank changes between periods.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Comparison</span></a><a href="/streamgraph" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><path d="M 4,30 C 20,18 40,42 60,28 C 80,16 96,32 100,26 L 100,42 C 96,32 80,46 60,38 C 40,28 20,52 4,40 Z" fill="#c94a2e" fill-opacity="0.45"></path><path d="M 4,40 C 20,28 40,52 60,38 C 80,32 96,42 100,42 L 100,52 C 96,46 80,52 60,48 C 40,40 20,52 4,48 Z" fill="#c94a2e" fill-opacity="0.85"></path></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Streamgraph</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When several stacked series shift in volume over time and you want a flowing organic shape rather than a strict baseline.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time series</span></a><a href="/bar-chart" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline block"><div class="h-[72px] mb-4 flex items-center justify-center"><svg viewBox="0 0 100 60" width="100" height="60"><rect x="8" y="20" width="14" height="35" fill="#c94a2e"></rect><rect x="28" y="14" width="14" height="41" fill="#c94a2e"></rect><rect x="48" y="28" width="14" height="27" fill="#c94a2e"></rect><rect x="68" y="22" width="14" height="33" fill="#c94a2e"></rect><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.2"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Bar chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When categories have no inherent order, or when you have a small fixed number of periods and want exact period-to-period comparison.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Comparison</span></a></div></section><section class="py-14 border-b border-[var(--border-color)]" id="tool-instructions"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->15<!-- --> â <!-- -->Tool instructions</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">How to build it in your tool of choice</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">The line chart ships with every tool. The recipes below get you to a clean, well-framed line chart with sensible markers, direct labels, annotation slots, and a clear forecast convention in each of the most common platforms.</p><div class="flex flex-col gap-5 mt-7"><div id="tool-instructions-excel" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Microsoft Excel</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">Spreadsheet â ~3 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Place dates in column A and the numeric value in column B, with a header row. Confirm the date column is formatted as a Date so Excel uses a real time axis instead of treating values as labels.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Highlight both columns including the headers and choose Insert â Charts â Line. Pick Line for dense data and Line with Markers when each point is meaningful (monthly KPIs, quarterly earnings).</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Right-click the value axis and choose Format Axis. Unlike bar charts, you do not have to start at zero â set Min and Max to a range that frames the variation, and set Major Units to a sensible interval.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Right-click the time axis, set its type to Date axis, and choose Major unit so tick labels do not overlap (Months for a year of data, Years for a decade).</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Add an annotation by inserting a Vertical Line via Insert â Shapes, then a Text Box for the caption. To overlay a forecast, plot it as a second series and right-click that series â Format Data Series â Line â Dash type â Dash.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Edit the chart title to lead with the takeaway, and label the most recent value: right-click the last point â Add Data Label â Position: Right.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Tip: Excelâs Forecast Sheet (Data â Forecast â Forecast Sheet) generates a built-in line chart with a confidence interval band â a one-click forecast for short, weekly-or-monthly series.</p></div><div id="tool-instructions-google-sheets" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Google Sheets</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">Spreadsheet â ~3 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Lay out your data with dates in the first column and values in the second column. Format the date column with Format â Number â Date so Sheets uses a true time axis.<

38/span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Select the range, then choose Insert â Chart. In the Chart editor on the right, set Chart type to Line chart for dense data or Smooth line chart only when the underlying signal really is smooth.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Open the Setup tab and confirm the date column is the X-axis. Switch to Customize â Vertical axis and set Min and Max to a range that frames the change â zero is optional for a line chart.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Under Customize â Series, toggle on Data labels for the last point only by right-clicking that point and choosing Add data label â a manual but readable way to print the most recent value.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Add a forecast by appending forecast rows below the data, plotting them as a second series, and styling that series with Customize â Series â Line type: dashed.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Edit the chart title and subtitle under Customize â Chart &amp; axis titles, leading with the takeaway and using the descriptive label as the subtitle.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Sheets has a built-in TREND() and FORECAST.ETS() function pair you can use to extend a series â plot the forecast in a second column with a different style and the chart updates instantly.</p></div><div id="tool-instructions-python" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Python (Matplotlib)</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">Code â ~5 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Install Matplotlib with pip install matplotlib if it is not already in your environment, and import matplotlib.pyplot as plt and matplotlib.dates as mdates if your X axis is dates.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Build two parallel sequences â a list of dates and a list of values â or load them from a Pandas DataFrame and pass them to plt.plot(dates, values).</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Set the value range with ax.set_ylim(low, high) to frame the variation. Skip ax.set_ylim(bottom=0) deliberately if zero is not meaningful for this metric.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Add markers only when each point is meaningful: pass marker=&#x27;o&#x27;, markersize=5 to plt.plot. Drop markers for dense series (daily or hourly).</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Annotate moments with ax.axvline(date, linestyle=&#x27;--&#x27;, color=&#x27;#999&#x27;) and ax.annotate(&#x27;Launch&#x27;, xy=(date, value), xytext=(...), arrowprops={&#x27;arrowstyle&#x27;: &#x27;-&gt;&#x27;}). Plot a forecast as a second call to plt.plot(forecast_dates, forecast_values, linestyle=&#x27;--&#x27;) and add a fill_between for the confidence band.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Drop the chart border with ax.spines[[&#x27;top&#x27;,&#x27;right&#x27;]].set_visible(False), set the title with ax.set_title(takeaway, loc=&#x27;left&#x27;), label the most recent point with ax.annotate(f&#x27;{value:,}&#x27;, xy=(last_date, last_value), xytext=(8, 0), textcoords=&#x27;offset points&#x27;), and call plt.tight_layout().</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Tip: use mdates.AutoDateLocator() and mdates.ConciseDateFormatter() to get clean, non-overlapping date ticks across multi-year ranges without hand-tuning.</p></div>

38<div id="tool-instructions-r" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">R (ggplot2)</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">Code â ~5 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Install ggplot2 with install.packages(&#x27;ggplot2&#x27;) and load it with library(ggplot2). For a multi-line chart, also install dplyr and tidyr to reshape data into long format.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Build a data frame with columns date (Date type), value (numeric) and optionally series (factor). Use as.Date(&#x27;2025-01-01&#x27;) to ensure dates are real Date objects, not strings.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Pass the data frame to ggplot(df, aes(x = date, y = value, color = series)) + geom_line(linewidth = 1.1). Add geom_point(size = 2) only if your data is sparse enough to benefit from markers.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Set the value range with scale_y_continuous(limits = c(low, high), expand = expansion(mult = c(0, 0.05))). Use coord_cartesian() instead of scale limits if you want to zoom without dropping points.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Annotate launches with geom_vline(xintercept = as.Date(&#x27;2025-04-15&#x27;), linetype = &#x27;dashed&#x27;) + annotate(&#x27;text&#x27;, x = ..., y = ..., label = &#x27;Product launch&#x27;). Plot a forecast by binding a second data frame with linetype = &#x27;dashed&#x27; and adding geom_ribbon() for a confidence interval.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Polish with labs(title = takeaway, subtitle = descriptor, x = NULL, y = &#x27;Users&#x27;), theme_minimal(base_size = 12), and the ggrepel package or geom_text(data = last_row, ...) to add a direct label at the end of each line.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Tip: prefer geom_line() (which connects ordered points) over geom_path() (which connects in row order) so an out-of-order data frame still produces a correctly ordered line.</p></div><div id="tool-instructions-javascript" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">JavaScript (D3.js)</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">Code â ~10 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Install D3 (npm i d3) or include the CDN script tag in your HTML. Create an SVG container with explicit width, height, and a margin object that leaves room for axis labels and direct line labels at the right edge.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Build scales: const x = d3.scaleTime().domain(d3.extent(data, d =&gt; d.date)).range([margin.left, width - margin.right]) and const y = d3.scaleLinear().domain([min, max]).nice().range([height - margin.bottom, margin.top]). Skip starting y at zero deliberately when zero is not meaningful.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Generate the path with const line = d3.line().x(d =&gt; x(d.date)).y(d =&gt; y(d.value)).curve(d3.curveLinear), then append it: svg.append(&#x27;path&#x27;).datum(data).attr(&#x27;d&#x27;, line).attr(&#x27;fill&#x27;, &#x27;none&#x27;).attr(&#x27;stroke&#x27;, &#x27;#c94a2e&#x27;).attr(&#x27;stroke-width&#x27;, 2).</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Add markers with svg.selectAll(&#x27;circle&#x27;).data(data).join(&#x27;circle&#x27;).attr(&#x27;cx&#x27;, d =&gt; x(d.date)).attr(&#x27;cy&#x27;, d =&gt; y(d.value)).attr(&#x27;r&#x27;, 4) only when point density is low. Skip them on dense daily or hourly series.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Render the axes with d3.axisBottom(x).tickSizeOuter(0) and d3.axisLeft(y), and append a final &lt;text&gt; element at the right of each line for direct labelling instead of a separate legend.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Add a forecast by drawing a second path with attr(&#x27;stroke-dasharray&#x27;, &#x27;4 3&#x27;) and a &lt;path&gt; for the confidence band built from d3.area(). Animate the line drawing with stroke-dasharray and stroke-dashoffset, but gate the animation behind a prefers-reduced-motion media query.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">

38Tip: if you donât need full control, Observable Plot (`Plot.lineY(data, {x: &#x27;date&#x27;, y: &#x27;value&#x27;})`), Chart.js, Recharts, Plotly, and ECharts all build a working line chart in fewer than ten lines.</p></div><div id="tool-instructions-tableau" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Tableau</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">BI â ~4 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>Connect to your data source and drag the date dimension to the Columns shelf and the value measure to the Rows shelf. Tableau picks the Line mark automatically when it sees a continuous date.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Right-click the date pill on Columns and confirm it is set to Continuous (with a green pill, not blue) and that the date part is correct (Day, Month, Year). Continuous dates produce a real time axis with proportional spacing.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Click the value axis, choose Edit Axis, and set Range to Fixed with sensible Start and End values. A line chart does not require zero â frame the variation that matters.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Drop a second measure on Rows or a category dimension on Color to add lines per series. Right-click each series in the Marks card and switch the mark from Line to Line + Marker only when point count is low.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>Add a forecast with Analytics pane â Forecast â drag onto the chart. Tableau dashes the forecast and shades the prediction interval automatically. To add a manual annotation, right-click a point â Annotate â Mark.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Use Format â Lines to remove gridlines you do not need, label the most recent point by dragging the value pill onto the Label property and setting Marks to label â Line ends â Last in line.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Tableauâs built-in forecast uses exponential smoothing (ETS) and surfaces both 80% and 95% confidence intervals â a one-click way to extend a series with the right visual conventions.</p></div><div id="tool-instructions-power-bi" class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6"><div class="flex flex-wrap items-baseline gap-3 mb-3"><h3 class="font-serif text-[20px] font-normal tracking-[-0.01em] text-[var(--ink)] leading-[1.2]">Power BI</h3><span class="font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)]">BI â ~4 min</span></div><ol class="flex flex-col gap-[10px] mt-3 list-none p-0"><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">01</span><span>In Power BI Desktop, open the Visualizations pane and choose Line chart. Drag your date field to the Axis well and your value field to the Values well.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">02</span><span>Click the value axis in the Format pane and turn Start off Auto, then set Min and Max manually. Power BI defaults to a zero start; for line charts that is usually wrong, so set the bounds to frame the change.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">03</span><span>Under Format â X-axis, set Type to Continuous so dates use a real time axis and tick labels stay proportional across the range.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">04</span><span>Add Markers under Format â Markers only when point count is low; for daily or hourly data leave them off so the line stays readable.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">05</span><span>

38Use the Analytics pane â Forecast to extend the line. Choose forecast length, seasonality, and confidence interval; Power BI dashes the forecast portion automatically. Add reference lines under Analytics â Constant line for goal targets or annotations.</span></li><li class="text-[13px] font-light text-[var(--ink)] leading-[1.65] flex gap-3"><span class="font-mono text-[11px] text-[var(--accent-color)] shrink-0 mt-[2px] w-5">06</span><span>Edit the title under Format â Title and write a takeaway sentence rather than the default field name. Add data labels for only the last point by toggling Format â Data labels â Customize series â the relevant series â First / Last.</span></li></ol><p class="text-[12px] text-[var(--ink-faint)] italic mt-4 pt-3 border-t border-[var(--border-color)]">Power BI line charts let you stack multiple series via the Legend well â keep it under five entries or switch to small multiples (available since 2021) for a clean per-series view.</p></div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="code-examples"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->16<!-- --> â <!-- -->Code examples</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Working code in the most common stacks</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Three runnable snippets that produce the same chart â a single-series line chart with open markers, a vertical annotation line for a launch event, and a direct label at the right edge for the most recent value. Copy, paste, and replace the data with yours.</p><div class="mt-7 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--border-color)] bg-[var(--bg-alt)] px-3 py-2"><div class="flex flex-wrap gap-1" role="tablist" aria-label="Code language"><button type="button" role="tab" aria-selected="true" class="font-mono text-[11px] tracking-[0.06em] px-3 py-[6px] rounded-[4px] transition-colors duration-150 cursor-pointer bg-[var(--ink)] text-white">Python â Matplotlib</button><button type="button" role="tab" aria-selected="false" class="font-mono text-[11px] tracking-[0.06em] px-3 py-[6px] rounded-[4px] transition-colors duration-150 cursor-pointer text-[var(--ink-muted)] hover:text-[var(--ink)] hover:bg-[var(--bg-card)]">R â ggplot2</button><button type="button" role="tab" aria-selected="false" class="font-mono text-[11px] tracking-[0.06em] px-3 py-[6px] rounded-[4px] transition-colors duration-150 cursor-pointer text-[var(--ink-muted)] hover:text-[var(--ink)] hover:bg-[var(--bg-card)]">JavaScript â D3.js</button></div><div class="flex items-center gap-3"><span class="font-mono text-[10px] text-[var(--ink-faint)]">line_chart.py</span><button type="button" class="font-mono text-[10px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] hover:bg-[var(--accent-light)] hover:text-[var(--accent-color)] text-[var(--ink-muted)] px-3 py-[6px] rounded-[4px] transition-colors duration-150 cursor-pointer" aria-label="Copy code to clipboard">Copy</button></div></div><pre class="overflow-x-auto p-5 m-0 text-[12.5px] leading-[1.65] font-mono text-[var(--ink)] bg-[var(--bg-card)]" tabindex="0" aria-label="Python â Matplotlib code sample"><code>import matplotlib.pyplot as plt
39import matplotlib.dates as mdates
40from datetime import date
41
42months = [date(2025, m, 1) for m in range(1, 7)]
43users  = [18_400, 26_100, 22_300, 38_500, 62_700, 92_400]
44
45fig, ax = plt.subplots(figsize=(8, 4.5))
46
47# Solid line for observed values, with markers because the data is sparse.
48ax.plot(months, users, color=&quot;#c94a2e&quot;, linewidth=2.5,
49        marker=&quot;o&quot;, markersize=6, markerfacecolor=&quot;white&quot;,
50        markeredgecolor=&quot;#c94a2e&quot;, markeredgewidth=2)
51
52# Frame the variation; do not force zero baseline.
53ax.set_ylim(0, 100_000)
54ax.set_title(&quot;Monthly active users tripled in H1 2025&quot;,
55             loc=&quot;left&quot;, fontsize=14, color=&quot;#1a1a18&quot;)
56
57# Direct label at the right edge instead of a legend.
58ax.annotate(f&quot;{users[-1]:,}&quot;, xy=(months[-1], users[-1]),
59            xytext=(8, 0), textcoords=&quot;offset points&quot;,
60            fontsize=11, color=&quot;#c94a2e&quot;, weight=&quot;bold&quot;, va=&quot;center&quot;)
61
62# Annotate a launch on April 15.
63launch = date(2025, 4, 15)
64ax.axvline(launch, color=&quot;#999&quot;, linestyle=&quot;--&quot;, linewidth=1)
65ax.annotate(&quot;v2 launch&quot;, xy=(launch, 80_000), xytext=(8, 0),
66            textcoords=&quot;offset points&quot;, fontsize=10, color=&quot;#666&quot;)
67
68ax.spines[[&quot;top&quot;, &quot;right&quot;]].set_visible(False)
69ax.xaxis.set_major_locator(mdates.AutoDateLocator())
70ax.xaxis.set_major_formatter(mdates.ConciseDateFormatter(ax.xaxis.get_major_locator()))
71ax.set_ylabel(&quot;Monthly active users&quot;)
72ax.grid(axis=&quot;y&quot;, linestyle=&quot;:&quot;, alpha=0.4)
73
74plt.tight_layout()
75plt.savefig(&quot;line_chart.png&quot;, dpi=200)
76plt.show()
77</code></pre><div class="px-5 py-3 border-t border-[var(--border-color)] bg-[var(--bg-alt)] font-mono text-[11px] text-[var(--ink-muted)]">$ <!-- -->python line_chart.py</div></div></section><section class="py-14 border-b border-[var(--border-color)]" id="faqs"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->17<!-- --> â FAQs</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">Frequently asked questions</h2><div class="flex flex-col gap-4 mt-6"><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group">

77<summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>What is a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">A line graph (also called a line chart) displays data points connected by straight line segments along a continuous axis â almost always time. It is one of the oldest and most intuitive ways to show how a value rises, falls, or holds steady from one moment to the next.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>When should you use a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Use a line graph whenever the question is about change over a continuous interval: how revenue moved month by month, how temperature evolved through the day, how a stock price drifted across the year. Lines work especially well when you have many time points and want the eye to track the trajectory rather than read individual values.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>When should you avoid a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Avoid a line graph when categories have no natural order â use a bar chart. Skip it when you only have two or three points, when there are large gaps in the time series, when more than five series would crowd the canvas, or when you need to show parts of a whole.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>What is the difference between a line graph and a bar chart?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">A line graph encodes value with the vertical position of a connected point and is built for continuous, ordered data such as time. A bar chart encodes value with the length of a discrete rectangle and is built for unordered categorical comparisons. The same dataset usually has only one right answer between the two.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>Does a line graph axis have to start at zero?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">No. Unlike a bar chart, a line graph encodes value with position, not length, so a non-zero baseline does not visually exaggerate the data. Pick a value range that frames the variation you want the reader to notice, while keeping the scale honest. Always label the axis so readers can see what range you chose.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group">

77<summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>What is the difference between a line graph and an area chart?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">A line graph draws only the line; an area chart fills everything between the line and the baseline. Use a single line when the trend is the headline. Use an area chart when the magnitude beneath the line carries meaning â for example, total accumulated value or how multiple stacked categories add up to a whole.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>How many lines should one line chart show?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Keep it to about four or five at most. Beyond that, lines start to overlap into what designers call a âspaghetti chart.â When you genuinely need to compare many series, use small multiples (one mini line chart per series, faceted on a grid) so each trend gets its own panel.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>Should a line graph use markers?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Use markers when each data point is meaningful and you want readers to read or hover over individual values â monthly KPIs, weekly cohorts, quarterly earnings. Drop them when the data is dense (daily or hourly readings) so the markers do not crowd the line and obscure the shape of the trend.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>What is the difference between a line graph and a slope chart?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">A slope chart is a deliberately stripped-down line chart with only two time points and one line per category, used to compare the change between two snapshots across many entities. A regular line chart shows the full trajectory through time and usually has fewer lines but more time points.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>What category of chart is a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Line Graph belongs to the Time Series family of charts. Charts in that family answer questions about change, trend, and continuity through time, so they often work as alternatives when a particular line chart variant doesnât quite fit your data.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>How do you read a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Start with the title, the units on the value axis, and the time range on the horizontal axis. Step back and follow the overall direction â rising, falling, flat â then look for inflection points, peaks, and troughs. Finish by checking the slope around any annotation or callout the author has made.</p></details>

77<details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>Can a line graph show forecasts?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Yes. The standard convention is to draw historical data with a solid line and the forecast with a dashed line of the same color, with a shaded confidence band around the forecast. Mark the present-day boundary with a vertical reference line and label it âNowâ or with the date.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>Can blind readers explore a line graph?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">Yes â line charts are one of the easiest chart types to make accessible. Provide a text alternative that summarizes the trend, expose the underlying values in a navigable table, and consider sonifying the line so screen-reader users can hear the trajectory using tools such as the SAS Graphics Accelerator or open-source web sonification libraries.</p></details><details class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 group"><summary class="text-[15px] font-medium text-[var(--ink)] cursor-pointer list-none flex items-start justify-between gap-4"><span>Whatâs the best library for building line charts in code?</span><span class="text-[var(--accent-color)] font-mono text-[14px] shrink-0 group-open:rotate-45 transition-transform duration-150">+</span></summary><p class="text-[14px] text-[var(--ink-muted)] leading-[1.7] font-light mt-3">For static publication-quality lines, Matplotlib (Python) and ggplot2 (R) remain the standard. For interactive web charts, D3.js gives the most control while Chart.js, Recharts, Plotly, ECharts, and Observable Plot all get you to a working line chart in fewer lines than D3.</p></details></div></section><section class="py-14 border-b border-[var(--border-color)]" id="references"><p class="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3">// <!-- -->18<!-- --> â <!-- -->References</p><h2 class="font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]">References and further reading</h2><p class="text-[16px] font-light text-[var(--ink)] leading-[1.75]">Primary sources, reference texts, accessibility guidance, and the official documentation for the libraries and tools referenced throughout this guide.</p><ul class="flex flex-col gap-3 mt-7 list-none p-0"><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://en.wikipedia.org/wiki/Line_chart" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Wikipedia â Line chart</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Reference</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Encyclopedia entry covering the history, variants, and visual encoding of line charts. A solid neutral starting point with citations to primary sources.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://en.wikipedia.org/wiki/Line_chart</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3">

77<a href="https://archive.org/details/PLAYFAIRWilliam1786TheCommercialandPoliticalAtlas" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">William Playfair â The Commercial and Political Atlas (1786)</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Primary source</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Playfairâs atlas, where the line graph first appeared as a way to visualize Englandâs national debt and Scotlandâs trade flows over time. Hosted by the Internet Archive.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://archive.org/details/PLAYFAIRWilliam1786TheCommercialandPoliticalAtlas</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://www.edwardtufte.com/book/the-visual-display-of-quantitative-information/" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Edward Tufte â The Visual Display of Quantitative Information</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Book</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Tufteâs foundational text on data graphics. Chapters on data-ink ratio, sparklines (he coined the word), and time-series presentation are directly relevant to line chart design.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://www.edwardtufte.com/book/the-visual-display-of-quantitative-information/</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Financial Times â Visual Vocabulary</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Reference</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Open-source poster categorizing chart types by intent. The Change-Over-Time family is where line charts, slope charts, and area charts are documented side by side.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://academy.datawrapper.de/article/127-what-to-consider-when-creating-a-line-chart" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Datawrapper Academy â What to consider when creating line charts</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Tutorial</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Hands-on tutorial with real published examples covering axis range, direct labelling, multi-series annotation, and the spaghetti-chart problem. Pairs well with this guideâs best-practices section.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://academy.datawrapper.de/article/127-what-to-consider-when-creating-a-line-chart</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://www.w3.org/WAI/tutorials/images/complex/" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">WAI â Complex Images: Charts and Graphs</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Accessibility</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Web Accessibility Initiative guidance on making charts accessible: text alternatives, long descriptions, and data tables. Use this when building the accessibility checklist for any line chart.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://www.w3.org/WAI/tutorials/images/complex/</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://support.sas.com/software/products/graphics-accelerator/index.html" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">SAS Graphics Accelerator â audio chart sonification</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Accessibility</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">A free browser extension that sonifies line and bar charts so blind and low-vision readers can hear the trajectory of a time series instead of relying on alt text alone.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://support.sas.com/software/products/graphics-accelerator/index.html</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.plot.html" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Matplotlib documentation â plt.plot</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Docs</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Official API reference for the Python line chart helper used in this guideâs code sample. Covers markers, line styles, dash patterns, and date axis formatting.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.plot.html</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://ggplot2.tidyverse.org/reference/geom_path.html" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">ggplot2 reference â geom_line</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Docs</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Tidyverse documentation for the ggplot2 line geometries. Explains the difference between geom_line (ordered by x) and geom_path (ordered by row).</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://ggplot2.tidyverse.org/reference/geom_path.html</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://d3js.org/d3-shape/line" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">D3.js â d3.line and d3-shape</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Docs</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Official documentation for the D3 line generator used in this guideâs JavaScript sample. Covers curve types, defined-points handling, and how to combine line() with area() for confidence bands.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://d3js.org/d3-shape/line</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://observablehq.com/plot/marks/line" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Observable Plot â Plot.lineY</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Docs</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Modern higher-level alternative to raw D3 for building line charts in the browser. Useful when you want a quick, declarative line chart with sensible defaults.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">

77https://observablehq.com/plot/marks/line</div></li><li class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] px-5 py-4 flex flex-col gap-1"><div class="flex flex-wrap items-baseline gap-3"><a href="https://www.jstor.org/stable/2288400" target="_blank" rel="noopener noreferrer" class="text-[14px] font-medium text-[var(--ink)] hover:text-[var(--accent-color)] no-underline transition-colors duration-150">Cleveland &amp; McGill â Graphical Perception (1984)</a><span class="font-mono text-[9px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[6px] py-[2px] rounded-[3px]">Research</span></div><div class="text-[13px] text-[var(--ink-muted)] font-light leading-[1.65]">Classic empirical study showing that humans read position along a common scale (the encoding lines and bars share) more accurately than length, area, or angle. The foundation of why line and bar charts dominate.</div><div class="font-mono text-[10px] text-[var(--ink-faint)] truncate">https://www.jstor.org/stable/2288400</div></li></ul></section></div><aside class="hidden md:block sticky top-[80px]"><div class="mt-12 mb-7"><p class="font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--ink-faint)] mb-[14px] pb-[10px] border-b border-[var(--border-color)]">On this page</p><ul class="list-none"><li class="mb-[2px]"><a href="#the-chart" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">01. The chart</a></li><li class="mb-[2px]"><a href="#what-is-it" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">02. What is it?</a></li><li class="mb-[2px]"><a href="#when-to-use" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">03. When to use it</a></li><li class="mb-[2px]"><a href="#when-not-to-use" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">04. When not to use it</a></li><li class="mb-[2px]"><a href="#data-requirements" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">05. Data requirements</a></li><li class="mb-[2px]"><a href="#anatomy" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">06. Anatomy</a></li><li class="mb-[2px]"><a href="#step-by-step" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">07. Step-by-step</a></li><li class="mb-[2px]"><a href="#real-world-examples" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">08. Examples</a></li><li class="mb-[2px]"><a href="#variations" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">09. Variations</a></li><li class="mb-[2px]"><a href="#comparisons" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">10. Comparisons</a></li><li class="mb-[2px]"><a href="#common-mistakes" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">11. Common mistakes</a></li><li class="mb-[2px]"><a href="#accessibility" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">12. Accessibility</a></li><li class="mb-[2px]"><a href="#best-practices" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">13. Best practices</a></li><li class="mb-[2px]"><a href="#related-charts" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">14. Alternatives</a></li><li class="mb-[2px]"><a href="#tool-instructions" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">15. Tool instructions</a></li><li class="mb-[2px]"><a href="#code-examples" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">16. Code examples</a></li><li class="mb-[2px]"><a href="#faqs" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">17. FAQs</a></li><li class="mb-[2px]"><a href="#references" class="block text-[12px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]">18. References</a></li></ul></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5"><div class="bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]">// At a glance</div><div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Category</span><span class="text-[14px] text-[var(--ink)] ">Time Series</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Difficulty</span><span class="text-[14px] text-[var(--ink)] text-[var(--green)]">Beginner</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Axis starts at</span><span class="text-[14px] text-[var(--ink)] ">Any value (zero optional)</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Best series count</span><span class="text-[14px] text-[var(--ink)] ">1 â 5</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Max series</span><span class="text-[14px] text-[var(--ink)] text-[var(--caution)]">~5 before spaghetti</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Invented</span><span class="text-[14px] text-[var(--ink)] ">1786</span></div><div class="px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]"><span class="text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]">Read time</span><span class="text-[14px] text-[var(--ink)] ">~15 min</span></div></div></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5"><div class="bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]">// Tags</div><div class="px-[18px] py-4"><div class="flex flex-wrap gap-[6px]"><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Time series</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Trend</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Continuous</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Beginner</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Classic</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Forecast</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Finance</span><span class="font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]">Accessibility-friendly</span></div></div></div><div class="bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5"><div class="bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]">// Similar charts</div><div class="py-1"><a href="/area-chart" class="flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer no-underline border-b border-[var(--border-color)]">Area chart<!-- --> <span>â</span></a><a href="/sparkline" class="flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer no-underline border-b border-[var(--border-color)]">Sparkline<!-- --> <span>â</span></a><a href="/step-line-chart" class="flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer no-underline border-b border-[var(--border-color)]">Step chart<!-- --> <span>â</span></a><a href="/slope-chart" class="flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer no-underline border-b border-[var(--border-color)]">Slope chart<!-- --> <span>â</span></a><a href="/streamgraph" class="flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer no-underline ">Streamgraph<!-- --> <span>â</span></a></div></div></aside></div></div><div class="border-t border-[var(--border-color)] bg-[var(--bg-card)] px-6 md:px-12 py-5 flex items-center justify-between"><div class="flex gap-8"><a href="/bar-chart" class="text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150 no-underline"><span class="text-[var(--accent-color)]">â</span>

77 Previous: Bar chart</a></div><span class="font-mono text-[11px] text-[var(--ink-faint)] hidden md:block">1 of 80+ chart types</span><div class="flex gap-8"><a href="/area-chart" class="text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150 no-underline">Next: Area chart <span class="text-[var(--accent-color)]">â</span></a></div></div></main><footer class="border-t border-[var(--border-color)] py-[40px] px-6 md:px-12 max-w-[1100px] mx-auto flex flex-col gap-[24px]" data-testid="footer"><div class="flex flex-col md:flex-row items-center justify-between gap-4"><a data-testid="footer-logo" href="/" class="font-serif text-[14px] text-[var(--ink)] no-underline">visualizing<span class="text-[var(--accent-color)]">.org</span></a><nav class="flex items-center gap-6" data-testid="footer-links"><a href="/privacy" class="text-[12px] text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 font-mono no-underline">Privacy Policy</a><a href="/terms" class="text-[12px] text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 font-mono n

77o-underline">Terms &amp; Conditions</a><a href="/contact" class="text-[12px] text-[var(--ink-muted)] hover:text-[var(--ink)] transition-colors duration-150 font-mono no-underline">Contact Us</a></nav><div class="text-[12px] text-[var(--ink-faint)] font-mono" data-testid="footer-copy">Â© 2025 â Free forever</div></div><div class="text-center text-[12px] text-[var(--ink-faint)] font-mono" data-testid="footer-credit">Made by<!-- --> <a href="https://www.erikrivera.com" target="_blank" rel="noopener noreferrer" class="text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 no-underline">Erik Rivera</a></div></footer></div></div>
78  </body>
79</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.