ds
Data display
Line and area

Line and area

Time series, stacked areas and thresholds.

Time on x, one measure on y. Lines are SVG paths in a 100 by 100 box with preserveAspectRatio="none", so they stretch to any width while strokes stay 1.75px. Everything with text or a round shape (labels, dots, markers, the tooltip) is HTML on top, positioned with custom properties, so nothing distorts.

Requests

2.73M 8.2%

00:0006:0012:0018:0000:00

Show code

<figure class="chart boxed">
  <figcaption class="ch-head">
    <div><p class="ch-title">Requests</p><p class="ch-v">2.73M <span class="delta up good pill">8.2%</span></p></div>
    <div class="seg sm"><button>1h</button><button aria-pressed="true">24h</button><button>7d</button></div>
  </figcaption>
  <div class="plot" role="img" aria-label="Requests per minute today, peaking at 4,054 around 14:30" data-hover='{"x":["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30"],"unit":" rpm","min":0,"max":6000,"stacked":false,"series":[{"name":"Requests","s":"s1","vals":[495,507,500,498,506,503,513,513,519,553,585,652,693,805,994,1263,1562,1830,2257,2566,3002,3290,3339,3681,3785,3727,3858,4054,4032,4053,3778,3847,3582,3485,3148,2877,2491,2136,1905,1666,1419,1165,1022,877,752,668,603,601]}]}'>
  <div class="ch-grid"><i style="--at:0" data-v="0"></i><i style="--at:0.3333" data-v="2k"></i><i style="--at:0.6667" data-v="4k"></i><i style="--at:1" data-v="6k"></i></div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path class="ch-fill s1" d="M0 91.75C0.71 91.68 1.42 91.55 2.13 91.55C2.84 91.55 3.55 91.65 4.26 91.67C4.96 91.68 5.67 91.7 6.38 91.7C7.09 91.7 7.8 91.57 8.51 91.57C9.22 91.57 9.93 91.62 10.64 91.62C11.35 91.62 12.06 91.45 12.77 91.45C13.48 91.45 14.18 91.45 14.89 91.45C15.6 91.45 16.31 91.41 17.02 91.35C17.73 91.29 18.44 90.97 19.15 90.78C19.86 90.6 20.57 90.49 21.28 90.25C21.99 90.01 22.7 89.42 23.4 89.13C24.11 88.85 24.82 88.78 25.53 88.45C26.24 88.12 26.95 87.36 27.66 86.58C28.37 85.8 29.08 84.67 29.79 83.43C30.5 82.2 31.21 80.52 31.91 78.95C32.62 77.38 33.33 75.54 34.04 73.97C34.75 72.4 35.46 71.33 36.17 69.5C36.88 67.67 37.59 64.38 38.3 62.38C39.01 60.39 39.72 59.24 40.43 57.23C41.13 55.22 41.84 51.89 42.55 49.97C43.26 48.04 43.97 45.63 44.68 45.17C45.39 44.7 46.1 44.83 46.81 44.35C47.52 43.87 48.23 39.54 48.94 38.65C49.65 37.76 50.35 36.92 51.06 36.92C51.77 36.92 52.48 37.88 53.19 37.88C53.9 37.88 54.61 36.57 55.32 35.7C56.03 34.83 56.74 32.43 57.45 32.43C58.16 32.43 58.87 32.8 59.57 32.8C60.28 32.8 60.99 32.45 61.7 32.45C62.41 32.45 63.12 37.03 63.83 37.03C64.54 37.03 65.25 35.88 65.96 35.88C66.67 35.88 67.38 39.51 68.09 40.3C68.79 41.09 69.5 41.08 70.21 41.92C70.92 42.75 71.63 45.86 72.34 47.53C73.05 49.2 73.76 50.28 74.47 52.05C75.18 53.82 75.89 56.43 76.6 58.48C77.3 60.54 78.01 62.85 78.72 64.4C79.43 65.95 80.14 66.94 80.85 68.25C81.56 69.56 82.27 70.88 82.98 72.23C83.69 73.58 84.4 74.96 85.11 76.35C85.82 77.74 86.52 79.57 87.23 80.58C87.94 81.6 88.65 82.17 89.36 82.97C90.07 83.77 90.78 84.64 91.49 85.38C92.2 86.13 92.91 86.91 93.62 87.47C94.33 88.02 95.04 88.46 95.74 88.87C96.45 89.27 97.16 89.93 97.87 89.95C98.58 89.97 99.29 89.97 100 89.98L100 100L0 100Z"/><path class="ch-line s1" d="M0 91.75C0.71 91.68 1.42 91.55 2.13 91.55C2.84 91.55 3.55 91.65 4.26 91.67C4.96 91.68 5.67 91.7 6.38 91.7C7.09 91.7 7.8 91.57 8.51 91.57C9.22 91.57 9.93 91.62 10.64 91.62C11.35 91.62 12.06 91.45 12.77 91.45C13.48 91.45 14.18 91.45 14.89 91.45C15.6 91.45 16.31 91.41 17.02 91.35C17.73 91.29 18.44 90.97 19.15 90.78C19.86 90.6 20.57 90.49 21.28 90.25C21.99 90.01 22.7 89.42 23.4 89.13C24.11 88.85 24.82 88.78 25.53 88.45C26.24 88.12 26.95 87.36 27.66 86.58C28.37 85.8 29.08 84.67 29.79 83.43C30.5 82.2 31.21 80.52 31.91 78.95C32.62 77.38 33.33 75.54 34.04 73.97C34.75 72.4 35.46 71.33 36.17 69.5C36.88 67.67 37.59 64.38 38.3 62.38C39.01 60.39 39.72 59.24 40.43 57.23C41.13 55.22 41.84 51.89 42.55 49.97C43.26 48.04 43.97 45.63 44.68 45.17C45.39 44.7 46.1 44.83 46.81 44.35C47.52 43.87 48.23 39.54 48.94 38.65C49.65 37.76 50.35 36.92 51.06 36.92C51.77 36.92 52.48 37.88 53.19 37.88C53.9 37.88 54.61 36.57 55.32 35.7C56.03 34.83 56.74 32.43 57.45 32.43C58.16 32.43 58.87 32.8 59.57 32.8C60.28 32.8 60.99 32.45 61.7 32.45C62.41 32.45 63.12 37.03 63.83 37.03C64.54 37.03 65.25 35.88 65.96 35.88C66.67 35.88 67.38 39.51 68.09 40.3C68.79 41.09 69.5 41.08 70.21 41.92C70.92 42.75 71.63 45.86 72.34 47.53C73.05 49.2 73.76 50.28 74.47 52.05C75.18 53.82 75.89 56.43 76.6 58.48C77.3 60.54 78.01 62.85 78.72 64.4C79.43 65.95 80.14 66.94 80.85 68.25C81.56 69.56 82.27 70.88 82.98 72.23C83.69 73.58 84.4 74.96 85.11 76.35C85.82 77.74 86.52 79.57 87.23 80.58C87.94 81.6 88.65 82.17 89.36 82.97C90.07 83.77 90.78 84.64 91.49 85.38C92.2 86.13 92.91 86.91 93.62 87.47C94.33 88.02 95.04 88.46 95.74 88.87C96.45 89.27 97.16 89.93 97.87 89.95C98.58 89.97 99.29 89.97 100 89.98"/></svg>
  <i class="ch-mark" style="--x:0.4468" data-v="v2.14.0"></i>
  <div class="ch-x"><span style="--at:0">00:00</span><span style="--at:0.25">06:00</span><span style="--at:0.5">12:00</span><span style="--at:0.75">18:00</span><span style="--at:1">00:00</span></div>
</div>
</figure>

One series gets a 12% fill in its own colour. The diamond marks a deploy: an event on the time axis, drawn in the accent because it is something someone did. Hover the chart for values.

Several series

Latency, checkout-api

Milliseconds, 30 minute buckets

00:0006:0012:0018:0000:00

Show code

<figure class="chart boxed">
  <figcaption class="ch-head">
    <div><p class="ch-title">Latency, checkout-api</p><p class="ch-sub">Milliseconds, 30 minute buckets</p></div>
    <ul class="ch-legend lines"><li class="s6">p50</li><li class="s1">p95</li><li class="s2">p99</li></ul>
  </figcaption>
  <div class="plot" style="--h:13rem" role="img" aria-label="Latency percentiles today. p99 crossed the 500 ms objective between 14:00 and 16:00." data-hover='{"x":["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30"],"unit":" ms","min":0,"max":800,"stacked":false,"series":[{"name":"p50","s":"s6","vals":[63,63,62,62,66,65,64,64,66,65,63,61,66,66,62,65,65,65,65,68,67,61,65,63,65,65,64,66,84,98,105,88,72,64,65,64,62,65,60,66,64,62,66,64,64,64,62,64]},{"name":"p95","s":"s1","vals":[150,145,151,153,155,151,159,151,150,144,152,148,145,150,154,150,148,152,155,153,151,146,155,147,153,152,153,177,249,306,375,298,216,151,157,150,148,155,152,153,144,155,151,156,147,148,148,155]},{"name":"p99","s":"s2","vals":[232,228,237,233,226,230,233,224,222,228,231,232,234,239,229,232,231,231,227,227,229,222,230,233,233,240,239,262,432,577,709,522,363,234,225,222,236,223,231,225,231,230,234,228,218,235,239,218]}]}'>
  <div class="ch-grid"><i style="--at:0" data-v="0"></i><i style="--at:0.25" data-v="200"></i><i style="--at:0.5" data-v="400"></i><i style="--at:0.75" data-v="600"></i><i style="--at:1" data-v="800"></i></div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path class="ch-line s6" d="M0 92.13C0.71 92.13 1.42 92.13 2.13 92.13C2.84 92.13 3.55 92.25 4.26 92.25C4.96 92.25 5.67 92.25 6.38 92.25C7.09 92.25 7.8 91.75 8.51 91.75C9.22 91.75 9.93 91.83 10.64 91.88C11.35 91.92 12.06 92 12.77 92C13.48 92 14.18 92 14.89 92C15.6 92 16.31 91.75 17.02 91.75C17.73 91.75 18.44 91.82 19.15 91.88C19.86 91.93 20.57 92.04 21.28 92.13C21.99 92.21 22.7 92.38 23.4 92.38C24.11 92.38 24.82 91.75 25.53 91.75C26.24 91.75 26.95 91.75 27.66 91.75C28.37 91.75 29.08 92.25 29.79 92.25C30.5 92.25 31.21 91.88 31.91 91.88C32.62 91.88 33.33 91.88 34.04 91.88C34.75 91.88 35.46 91.88 36.17 91.88C36.88 91.88 37.59 91.88 38.3 91.88C39.01 91.88 39.72 91.5 40.43 91.5C41.13 91.5 41.84 91.55 42.55 91.63C43.26 91.7 43.97 92.38 44.68 92.38C45.39 92.38 46.1 91.88 46.81 91.88C47.52 91.88 48.23 92.13 48.94 92.13C49.65 92.13 50.35 91.88 51.06 91.88C51.77 91.88 52.48 91.88 53.19 91.88C53.9 91.88 54.61 92 55.32 92C56.03 92 56.74 91.9 57.45 91.75C58.16 91.6 58.87 90.16 59.57 89.5C60.28 88.84 60.99 88.14 61.7 87.75C62.41 87.36 63.12 86.88 63.83 86.88C64.54 86.88 65.25 88.31 65.96 89C66.67 89.69 67.38 90.56 68.09 91C68.79 91.44 69.5 92 70.21 92C70.92 92 71.63 91.88 72.34 91.88C73.05 91.88 73.76 91.94 74.47 92C75.18 92.06 75.89 92.25 76.6 92.25C77.3 92.25 78.01 91.88 78.72 91.88C79.43 91.88 80.14 92.5 80.85 92.5C81.56 92.5 82.27 91.75 82.98 91.75C83.69 91.75 84.4 91.92 85.11 92C85.82 92.08 86.52 92.25 87.23 92.25C87.94 92.25 88.65 91.75 89.36 91.75C90.07 91.75 90.78 92 91.49 92C92.2 92 92.91 92 93.62 92C94.33 92 95.04 92 95.74 92C96.45 92 97.16 92.25 97.87 92.25C98.58 92.25 99.29 92.08 100 92"/><path class="ch-line s1" d="M0 81.25C0.71 81.46 1.42 81.88 2.13 81.88C2.84 81.88 3.55 81.25 4.26 81.13C4.96 81 5.67 80.96 6.38 80.88C7.09 80.79 7.8 80.63 8.51 80.63C9.22 80.63 9.93 81.13 10.64 81.13C11.35 81.13 12.06 80.13 12.77 80.13C13.48 80.13 14.18 81.05 14.89 81.13C15.6 81.2 16.31 81.18 17.02 81.25C17.73 81.32 18.44 82 19.15 82C19.86 82 20.57 81 21.28 81C21.99 81 22.7 81.36 23.4 81.5C24.11 81.64 24.82 81.88 25.53 81.88C26.24 81.88 26.95 81.44 27.66 81.25C28.37 81.06 29.08 80.75 29.79 80.75C30.5 80.75 31.21 81.14 31.91 81.25C32.62 81.36 33.33 81.5 34.04 81.5C34.75 81.5 35.46 81.14 36.17 81C36.88 80.86 37.59 80.63 38.3 80.63C39.01 80.63 39.72 80.79 40.43 80.88C41.13 80.96 41.84 81.01 42.55 81.13C43.26 81.24 43.97 81.75 44.68 81.75C45.39 81.75 46.1 80.63 46.81 80.63C47.52 80.63 48.23 81.63 48.94 81.63C49.65 81.63 50.35 80.88 51.06 80.88C51.77 80.88 52.48 81 53.19 81C53.9 81 54.61 80.95 55.32 80.88C56.03 80.8 56.74 79.38 57.45 77.88C58.16 76.38 58.87 71.53 59.57 68.88C60.28 66.22 60.99 64.35 61.7 61.75C62.41 59.15 63.12 53.13 63.83 53.13C64.54 53.13 65.25 59.44 65.96 62.75C66.67 66.06 67.38 69.98 68.09 73C68.79 76.02 69.5 81.13 70.21 81.13C70.92 81.13 71.63 80.38 72.34 80.38C73.05 80.38 73.76 81.12 74.47 81.25C75.18 81.38 75.89 81.5 76.6 81.5C77.3 81.5 78.01 80.63 78.72 80.63C79.43 80.63 80.14 81 80.85 81C81.56 81 82.27 80.88 82.98 80.88C83.69 80.88 84.4 82 85.11 82C85.82 82 86.52 80.63 87.23 80.63C87.94 80.63 88.65 81.13 89.36 81.13C90.07 81.13 90.78 80.5 91.49 80.5C92.2 80.5 92.91 81.63 93.62 81.63C94.33 81.63 95.04 81.5 95.74 81.5C96.45 81.5 97.16 81.5 97.87 81.5C98.58 81.5 99.29 80.92 100 80.63"/><path class="ch-line s2" d="M0 71C0.71 71.17 1.42 71.5 2.13 71.5C2.84 71.5 3.55 70.38 4.26 70.38C4.96 70.38 5.67 70.66 6.38 70.88C7.09 71.09 7.8 71.75 8.51 71.75C9.22 71.75 9.93 71.39 10.64 71.25C11.35 71.11 12.06 70.88 12.77 70.88C13.48 70.88 14.18 71.86 14.89 72C15.6 72.14 16.31 72.25 17.02 72.25C17.73 72.25 18.44 71.67 19.15 71.5C19.86 71.33 20.57 71.19 21.28 71.13C21.99 71.06 22.7 71.06 23.4 71C24.11 70.94 24.82 70.87 25.53 70.75C26.24 70.63 26.95 70.13 27.66 70.13C28.37 70.13 29.08 71.38 29.79 71.38C30.5 71.38 31.21 71 31.91 71C32.62 71 33.33 71.13 34.04 71.13C34.75 71.13 35.46 71.13 36.17 71.13C36.88 71.13 37.59 71.63 38.3 71.63C39.01 71.63 39.72 71.63 40.43 71.63C41.13 71.63 41.84 71.38 42.55 71.38C43.26 71.38 43.97 72.25 44.68 72.25C45.39 72.25 46.1 71.43 46.81 71.25C47.52 71.07 48.23 70.88 48.94 70.88C49.65 70.88 50.35 70.88 51.06 70.88C51.77 70.88 52.48 70 53.19 70C53.9 70 54.61 70.13 55.32 70.13C56.03 70.13 56.74 68.94 57.45 67.25C58.16 65.56 58.87 52.52 59.57 46C60.28 39.48 60.99 33.63 61.7 27.88C62.41 22.12 63.12 11.38 63.83 11.38C64.54 11.38 65.25 27.59 65.96 34.75C66.67 41.91 67.38 48.69 68.09 54.63C68.79 60.56 69.5 70.05 70.21 70.75C70.92 71.45 71.63 71.69 72.34 71.88C73.05 72.06 73.76 72.25 74.47 72.25C75.18 72.25 75.89 70.5 76.6 70.5C77.3 70.5 78.01 72.13 78.72 72.13C79.43 72.13 80.14 71.13 80.85 71.13C81.56 71.13 82.27 71.88 82.98 71.88C83.69 71.88 84.4 71.13 85.11 71.13C85.82 71.13 86.52 71.25 87.23 71.25C87.94 71.25 88.65 70.75 89.36 70.75C90.07 70.75 90.78 71.19 91.49 71.5C92.2 71.81 92.91 72.75 93.62 72.75C94.33 72.75 95.04 70.89 95.74 70.63C96.45 70.36 97.16 70.13 97.87 70.13C98.58 70.13 99.29 71.88 100 72.75"/></svg>
  <i class="ch-band" style="--x:0.5957;--w:0.0851" data-v="INC-231"></i>
  <i class="ch-thr" style="--at:0.625" data-v="SLO 500 ms"></i>
  <div class="ch-x"><span style="--at:0">00:00</span><span style="--at:0.25">06:00</span><span style="--at:0.5">12:00</span><span style="--at:0.75">18:00</span><span style="--at:1">00:00</span></div>
</div>
</figure>

Percentiles read best as a quiet p50 in the neutral and the tails in the two strong series colours. The red band is the incident window and the dashed line is the objective; both are status colours because they are about health, not about a series.

Stacked area

Requests by region

Stacked, requests per minute

ap-south-1
eu-west-1
us-east-1

00:0006:0012:0018:0000:00

Show code

<figure class="chart boxed">
  <figcaption class="ch-head">
    <div><p class="ch-title">Requests by region</p><p class="ch-sub">Stacked, requests per minute</p></div>
    <ul class="ch-legend"><li class="s1">ap-south-1</li><li class="s2">eu-west-1</li><li class="s3">us-east-1</li></ul>
  </figcaption>
  <div class="plot" role="img" aria-label="Requests by region, stacked" data-hover='{"x":["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30"],"unit":" rpm","min":0,"max":6000,"stacked":true,"series":[{"name":"ap-south-1","s":"s1","vals":[249,255,254,251,249,256,255,257,266,281,282,312,359,421,520,602,765,940,1133,1248,1470,1625,1681,1711,1851,1836,1917,1935,1993,1993,1942,1965,1786,1635,1556,1400,1239,1086,952,821,700,583,496,433,391,337,313,291]},{"name":"eu-west-1","s":"s2","vals":[85,91,97,96,103,110,119,120,124,134,147,161,187,223,286,349,452,569,687,800,924,978,1012,1132,1098,1178,1172,1225,1230,1234,1199,1143,1084,972,860,789,667,558,493,412,343,269,232,192,159,140,120,111]},{"name":"us-east-1","s":"s3","vals":[74,75,82,80,84,85,90,90,93,100,112,123,135,169,203,254,323,402,492,552,631,717,755,819,861,899,933,944,1007,999,338,353,330,332,316,290,270,237,207,187,166,146,128,116,101,96,92,87]}]}'>
  <div class="ch-grid"><i style="--at:0" data-v="0"></i><i style="--at:0.3333" data-v="2k"></i><i style="--at:0.6667" data-v="4k"></i><i style="--at:1" data-v="6k"></i></div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path class="ch-fill strong s1" d="M0 95.85C0.71 95.82 1.42 95.75 2.13 95.75C2.84 95.75 3.55 95.76 4.26 95.77C4.96 95.78 5.67 95.8 6.38 95.82C7.09 95.83 7.8 95.85 8.51 95.85C9.22 95.85 9.93 95.73 10.64 95.73C11.35 95.73 12.06 95.75 12.77 95.75C13.48 95.75 14.18 95.73 14.89 95.72C15.6 95.7 16.31 95.63 17.02 95.57C17.73 95.5 18.44 95.33 19.15 95.32C19.86 95.31 20.57 95.31 21.28 95.3C21.99 95.29 22.7 95 23.4 94.8C24.11 94.6 24.82 94.31 25.53 94.02C26.24 93.72 26.95 93.41 27.66 92.98C28.37 92.56 29.08 91.83 29.79 91.33C30.5 90.83 31.21 90.57 31.91 89.97C32.62 89.36 33.33 88.19 34.04 87.25C34.75 86.31 35.46 85.35 36.17 84.33C36.88 83.31 37.59 81.92 38.3 81.12C39.01 80.32 39.72 80.04 40.43 79.2C41.13 78.36 41.84 76.51 42.55 75.5C43.26 74.49 43.97 73.37 44.68 72.92C45.39 72.46 46.1 72.2 46.81 71.98C47.52 71.77 48.23 71.76 48.94 71.48C49.65 71.21 50.35 69.15 51.06 69.15C51.77 69.15 52.48 69.4 53.19 69.4C53.9 69.4 54.61 68.21 55.32 68.05C56.03 67.89 56.74 67.9 57.45 67.75C58.16 67.6 58.87 66.78 59.57 66.78C60.28 66.78 60.99 66.78 61.7 66.78C62.41 66.78 63.12 67.63 63.83 67.63C64.54 67.63 65.25 67.25 65.96 67.25C66.67 67.25 67.38 69.32 68.09 70.23C68.79 71.14 69.5 72.17 70.21 72.75C70.92 73.33 71.63 73.48 72.34 74.07C73.05 74.65 73.76 75.79 74.47 76.67C75.18 77.55 75.89 78.48 76.6 79.35C77.3 80.22 78.01 81.11 78.72 81.9C79.43 82.69 80.14 83.4 80.85 84.13C81.56 84.87 82.27 85.62 82.98 86.32C83.69 87.02 84.4 87.67 85.11 88.33C85.82 88.99 86.52 89.73 87.23 90.28C87.94 90.84 88.65 91.33 89.36 91.73C90.07 92.14 90.78 92.5 91.49 92.78C92.2 93.06 92.91 93.22 93.62 93.48C94.33 93.75 95.04 94.2 95.74 94.38C96.45 94.57 97.16 94.66 97.87 94.78C98.58 94.91 99.29 95.03 100 95.15L100 100L0 100Z"/><path class="ch-line s1" d="M0 95.85C0.71 95.82 1.42 95.75 2.13 95.75C2.84 95.75 3.55 95.76 4.26 95.77C4.96 95.78 5.67 95.8 6.38 95.82C7.09 95.83 7.8 95.85 8.51 95.85C9.22 95.85 9.93 95.73 10.64 95.73C11.35 95.73 12.06 95.75 12.77 95.75C13.48 95.75 14.18 95.73 14.89 95.72C15.6 95.7 16.31 95.63 17.02 95.57C17.73 95.5 18.44 95.33 19.15 95.32C19.86 95.31 20.57 95.31 21.28 95.3C21.99 95.29 22.7 95 23.4 94.8C24.11 94.6 24.82 94.31 25.53 94.02C26.24 93.72 26.95 93.41 27.66 92.98C28.37 92.56 29.08 91.83 29.79 91.33C30.5 90.83 31.21 90.57 31.91 89.97C32.62 89.36 33.33 88.19 34.04 87.25C34.75 86.31 35.46 85.35 36.17 84.33C36.88 83.31 37.59 81.92 38.3 81.12C39.01 80.32 39.72 80.04 40.43 79.2C41.13 78.36 41.84 76.51 42.55 75.5C43.26 74.49 43.97 73.37 44.68 72.92C45.39 72.46 46.1 72.2 46.81 71.98C47.52 71.77 48.23 71.76 48.94 71.48C49.65 71.21 50.35 69.15 51.06 69.15C51.77 69.15 52.48 69.4 53.19 69.4C53.9 69.4 54.61 68.21 55.32 68.05C56.03 67.89 56.74 67.9 57.45 67.75C58.16 67.6 58.87 66.78 59.57 66.78C60.28 66.78 60.99 66.78 61.7 66.78C62.41 66.78 63.12 67.63 63.83 67.63C64.54 67.63 65.25 67.25 65.96 67.25C66.67 67.25 67.38 69.32 68.09 70.23C68.79 71.14 69.5 72.17 70.21 72.75C70.92 73.33 71.63 73.48 72.34 74.07C73.05 74.65 73.76 75.79 74.47 76.67C75.18 77.55 75.89 78.48 76.6 79.35C77.3 80.22 78.01 81.11 78.72 81.9C79.43 82.69 80.14 83.4 80.85 84.13C81.56 84.87 82.27 85.62 82.98 86.32C83.69 87.02 84.4 87.67 85.11 88.33C85.82 88.99 86.52 89.73 87.23 90.28C87.94 90.84 88.65 91.33 89.36 91.73C90.07 92.14 90.78 92.5 91.49 92.78C92.2 93.06 92.91 93.22 93.62 93.48C94.33 93.75 95.04 94.2 95.74 94.38C96.45 94.57 97.16 94.66 97.87 94.78C98.58 94.91 99.29 95.03 100 95.15"/><path class="ch-fill strong s2" d="M0 94.43C0.71 94.37 1.42 94.27 2.13 94.23C2.84 94.19 3.55 94.15 4.26 94.15C4.96 94.15 5.67 94.22 6.38 94.22C7.09 94.22 7.8 94.17 8.51 94.13C9.22 94.09 9.93 93.96 10.64 93.9C11.35 93.84 12.06 93.79 12.77 93.77C13.48 93.74 14.18 93.74 14.89 93.72C15.6 93.69 16.31 93.6 17.02 93.5C17.73 93.4 18.44 93.18 19.15 93.08C19.86 92.98 20.57 92.97 21.28 92.85C21.99 92.73 22.7 92.42 23.4 92.12C24.11 91.81 24.82 91.36 25.53 90.9C26.24 90.44 26.95 89.95 27.66 89.27C28.37 88.59 29.08 87.42 29.79 86.57C30.5 85.72 31.21 85.19 31.91 84.15C32.62 83.11 33.33 81.26 34.04 79.72C34.75 78.17 35.46 76.52 36.17 74.85C36.88 73.18 37.59 71.13 38.3 69.67C39.01 68.2 39.72 67.39 40.43 65.87C41.13 64.34 41.84 61.55 42.55 60.1C43.26 58.65 43.97 57.32 44.68 56.62C45.39 55.92 46.1 55.74 46.81 55.12C47.52 54.49 48.23 53.31 48.94 52.62C49.65 51.93 50.35 51.3 51.06 50.85C51.77 50.4 52.48 50.15 53.19 49.77C53.9 49.38 54.61 48.92 55.32 48.52C56.03 48.11 56.74 47.7 57.45 47.33C58.16 46.96 58.87 46.33 59.57 46.28C60.28 46.24 60.99 46.22 61.7 46.22C62.41 46.22 63.12 47.39 63.83 47.65C64.54 47.91 65.25 47.88 65.96 48.2C66.67 48.52 67.38 50.78 68.09 52.17C68.79 53.55 69.5 55.32 70.21 56.55C70.92 57.78 71.63 58.58 72.34 59.73C73.05 60.89 73.76 62.12 74.47 63.52C75.18 64.92 75.89 66.72 76.6 68.23C77.3 69.74 78.01 71.34 78.72 72.6C79.43 73.86 80.14 74.78 80.85 75.92C81.56 77.06 82.27 78.34 82.98 79.45C83.69 80.56 84.4 81.56 85.11 82.62C85.82 83.67 86.52 84.96 87.23 85.8C87.94 86.64 88.65 87.24 89.36 87.87C90.07 88.49 90.78 89.1 91.49 89.58C92.2 90.07 92.91 90.42 93.62 90.83C94.33 91.24 95.04 91.74 95.74 92.05C96.45 92.36 97.16 92.58 97.87 92.78C98.58 92.99 99.29 93.13 100 93.3L100 95.15C99.29 95.03 98.58 94.91 97.87 94.78C97.16 94.66 96.45 94.57 95.74 94.38C95.04 94.2 94.33 93.75 93.62 93.48C92.91 93.22 92.2 93.06 91.49 92.78C90.78 92.5 90.07 92.14 89.36 91.73C88.65 91.33 87.94 90.84 87.23 90.28C86.52 89.73 85.82 88.99 85.11 88.33C84.4 87.67 83.69 87.02 82.98 86.32C82.27 85.62 81.56 84.87 80.85 84.13C80.14 83.4 79.43 82.69 78.72 81.9C78.01 81.11 77.3 80.22 76.6 79.35C75.89 78.48 75.18 77.55 74.47 76.67C73.76 75.79 73.05 74.65 72.34 74.07C71.63 73.48 70.92 73.33 70.21 72.75C69.5 72.17 68.79 71.14 68.09 70.23C67.38 69.32 66.67 67.25 65.96 67.25C65.25 67.25 64.54 67.63 63.83 67.63C63.12 67.63 62.41 66.78 61.7 66.78C60.99 66.78 60.28 66.78 59.57 66.78C58.87 66.78 58.16 67.6 57.45 67.75C56.74 67.9 56.03 67.89 55.32 68.05C54.61 68.21 53.9 69.4 53.19 69.4C52.48 69.4 51.77 69.15 51.06 69.15C50.35 69.15 49.65 71.21 48.94 71.48C48.23 71.76 47.52 71.77 46.81 71.98C46.1 72.2 45.39 72.46 44.68 72.92C43.97 73.37 43.26 74.49 42.55 75.5C41.84 76.51 41.13 78.36 40.43 79.2C39.72 80.04 39.01 80.32 38.3 81.12C37.59 81.92 36.88 83.31 36.17 84.33C35.46 85.35 34.75 86.31 34.04 87.25C33.33 88.19 32.62 89.36 31.91 89.97C31.21 90.57 30.5 90.83 29.79 91.33C29.08 91.83 28.37 92.56 27.66 92.98C26.95 93.41 26.24 93.72 25.53 94.02C24.82 94.31 24.11 94.6 23.4 94.8C22.7 95 21.99 95.29 21.28 95.3C20.57 95.31 19.86 95.31 19.15 95.32C18.44 95.33 17.73 95.5 17.02 95.57C16.31 95.63 15.6 95.7 14.89 95.72C14.18 95.73 13.48 95.75 12.77 95.75C12.06 95.75 11.35 95.73 10.64 95.73C9.93 95.73 9.22 95.85 8.51 95.85C7.8 95.85 7.09 95.83 6.38 95.82C5.67 95.8 4.96 95.78 4.26 95.77C3.55 95.76 2.84 95.75 2.13 95.75C1.42 95.75 0.71 95.82 0 95.85Z"/><path class="ch-line s2" d="M0 94.43C0.71 94.37 1.42 94.27 2.13 94.23C2.84 94.19 3.55 94.15 4.26 94.15C4.96 94.15 5.67 94.22 6.38 94.22C7.09 94.22 7.8 94.17 8.51 94.13C9.22 94.09 9.93 93.96 10.64 93.9C11.35 93.84 12.06 93.79 12.77 93.77C13.48 93.74 14.18 93.74 14.89 93.72C15.6 93.69 16.31 93.6 17.02 93.5C17.73 93.4 18.44 93.18 19.15 93.08C19.86 92.98 20.57 92.97 21.28 92.85C21.99 92.73 22.7 92.42 23.4 92.12C24.11 91.81 24.82 91.36 25.53 90.9C26.24 90.44 26.95 89.95 27.66 89.27C28.37 88.59 29.08 87.42 29.79 86.57C30.5 85.72 31.21 85.19 31.91 84.15C32.62 83.11 33.33 81.26 34.04 79.72C34.75 78.17 35.46 76.52 36.17 74.85C36.88 73.18 37.59 71.13 38.3 69.67C39.01 68.2 39.72 67.39 40.43 65.87C41.13 64.34 41.84 61.55 42.55 60.1C43.26 58.65 43.97 57.32 44.68 56.62C45.39 55.92 46.1 55.74 46.81 55.12C47.52 54.49 48.23 53.31 48.94 52.62C49.65 51.93 50.35 51.3 51.06 50.85C51.77 50.4 52.48 50.15 53.19 49.77C53.9 49.38 54.61 48.92 55.32 48.52C56.03 48.11 56.74 47.7 57.45 47.33C58.16 46.96 58.87 46.33 59.57 46.28C60.28 46.24 60.99 46.22 61.7 46.22C62.41 46.22 63.12 47.39 63.83 47.65C64.54 47.91 65.25 47.88 65.96 48.2C66.67 48.52 67.38 50.78 68.09 52.17C68.79 53.55 69.5 55.32 70.21 56.55C70.92 57.78 71.63 58.58 72.34 59.73C73.05 60.89 73.76 62.12 74.47 63.52C75.18 64.92 75.89 66.72 76.6 68.23C77.3 69.74 78.01 71.34 78.72 72.6C79.43 73.86 80.14 74.78 80.85 75.92C81.56 77.06 82.27 78.34 82.98 79.45C83.69 80.56 84.4 81.56 85.11 82.62C85.82 83.67 86.52 84.96 87.23 85.8C87.94 86.64 88.65 87.24 89.36 87.87C90.07 88.49 90.78 89.1 91.49 89.58C92.2 90.07 92.91 90.42 93.62 90.83C94.33 91.24 95.04 91.74 95.74 92.05C96.45 92.36 97.16 92.58 97.87 92.78C98.58 92.99 99.29 93.13 100 93.3"/><path class="ch-fill strong s3" d="M0 93.2C0.71 93.13 1.42 93.05 2.13 92.98C2.84 92.91 3.55 92.78 4.26 92.78C4.96 92.78 5.67 92.88 6.38 92.88C7.09 92.88 7.8 92.8 8.51 92.73C9.22 92.67 9.93 92.56 10.64 92.48C11.35 92.41 12.06 92.29 12.77 92.27C13.48 92.24 14.18 92.24 14.89 92.22C15.6 92.19 16.31 92.07 17.02 91.95C17.73 91.83 18.44 91.58 19.15 91.42C19.86 91.26 20.57 91.18 21.28 90.98C21.99 90.79 22.7 90.44 23.4 90.07C24.11 89.7 24.82 89.22 25.53 88.65C26.24 88.08 26.95 87.33 27.66 86.45C28.37 85.57 29.08 84.27 29.79 83.18C30.5 82.09 31.21 81.29 31.91 79.92C32.62 78.54 33.33 76.29 34.04 74.33C34.75 72.38 35.46 70.29 36.17 68.15C36.88 66.01 37.59 63.33 38.3 61.47C39.01 59.6 39.72 58.57 40.43 56.67C41.13 54.76 41.84 51.52 42.55 49.58C43.26 47.65 43.97 45.66 44.68 44.67C45.39 43.67 46.1 43.42 46.81 42.53C47.52 41.64 48.23 39.94 48.94 38.97C49.65 37.99 50.35 37.17 51.06 36.5C51.77 35.83 52.48 35.37 53.19 34.78C53.9 34.19 54.61 33.49 55.32 32.97C56.03 32.45 56.74 32.15 57.45 31.6C58.16 31.05 58.87 29.5 59.57 29.5C60.28 29.5 60.99 29.52 61.7 29.57C62.41 29.61 63.12 41.82 63.83 42.02C64.54 42.21 65.25 42.13 65.96 42.32C66.67 42.5 67.38 45.22 68.09 46.67C68.79 48.12 69.5 49.73 70.21 51.02C70.92 52.3 71.63 53.2 72.34 54.47C73.05 55.73 73.76 57.15 74.47 58.68C75.18 60.22 75.89 62.07 76.6 63.73C77.3 65.39 78.01 67.22 78.72 68.65C79.43 70.08 80.14 71.19 80.85 72.47C81.56 73.75 82.27 75.11 82.98 76.33C83.69 77.56 84.4 78.68 85.11 79.85C85.82 81.02 86.52 82.42 87.23 83.37C87.94 84.31 88.65 85.03 89.36 85.73C90.07 86.44 90.78 87.09 91.49 87.65C92.2 88.21 92.91 88.69 93.62 89.15C94.33 89.61 95.04 90.12 95.74 90.45C96.45 90.78 97.16 91.02 97.87 91.25C98.58 91.48 99.29 91.65 100 91.85L100 93.3C99.29 93.13 98.58 92.99 97.87 92.78C97.16 92.58 96.45 92.36 95.74 92.05C95.04 91.74 94.33 91.24 93.62 90.83C92.91 90.42 92.2 90.07 91.49 89.58C90.78 89.1 90.07 88.49 89.36 87.87C88.65 87.24 87.94 86.64 87.23 85.8C86.52 84.96 85.82 83.67 85.11 82.62C84.4 81.56 83.69 80.56 82.98 79.45C82.27 78.34 81.56 77.06 80.85 75.92C80.14 74.78 79.43 73.86 78.72 72.6C78.01 71.34 77.3 69.74 76.6 68.23C75.89 66.72 75.18 64.92 74.47 63.52C73.76 62.12 73.05 60.89 72.34 59.73C71.63 58.58 70.92 57.78 70.21 56.55C69.5 55.32 68.79 53.55 68.09 52.17C67.38 50.78 66.67 48.52 65.96 48.2C65.25 47.88 64.54 47.91 63.83 47.65C63.12 47.39 62.41 46.22 61.7 46.22C60.99 46.22 60.28 46.24 59.57 46.28C58.87 46.33 58.16 46.96 57.45 47.33C56.74 47.7 56.03 48.11 55.32 48.52C54.61 48.92 53.9 49.38 53.19 49.77C52.48 50.15 51.77 50.4 51.06 50.85C50.35 51.3 49.65 51.93 48.94 52.62C48.23 53.31 47.52 54.49 46.81 55.12C46.1 55.74 45.39 55.92 44.68 56.62C43.97 57.32 43.26 58.65 42.55 60.1C41.84 61.55 41.13 64.34 40.43 65.87C39.72 67.39 39.01 68.2 38.3 69.67C37.59 71.13 36.88 73.18 36.17 74.85C35.46 76.52 34.75 78.17 34.04 79.72C33.33 81.26 32.62 83.11 31.91 84.15C31.21 85.19 30.5 85.72 29.79 86.57C29.08 87.42 28.37 88.59 27.66 89.27C26.95 89.95 26.24 90.44 25.53 90.9C24.82 91.36 24.11 91.81 23.4 92.12C22.7 92.42 21.99 92.73 21.28 92.85C20.57 92.97 19.86 92.98 19.15 93.08C18.44 93.18 17.73 93.4 17.02 93.5C16.31 93.6 15.6 93.69 14.89 93.72C14.18 93.74 13.48 93.74 12.77 93.77C12.06 93.79 11.35 93.84 10.64 93.9C9.93 93.96 9.22 94.09 8.51 94.13C7.8 94.17 7.09 94.22 6.38 94.22C5.67 94.22 4.96 94.15 4.26 94.15C3.55 94.15 2.84 94.19 2.13 94.23C1.42 94.27 0.71 94.37 0 94.43Z"/><path class="ch-line s3" d="M0 93.2C0.71 93.13 1.42 93.05 2.13 92.98C2.84 92.91 3.55 92.78 4.26 92.78C4.96 92.78 5.67 92.88 6.38 92.88C7.09 92.88 7.8 92.8 8.51 92.73C9.22 92.67 9.93 92.56 10.64 92.48C11.35 92.41 12.06 92.29 12.77 92.27C13.48 92.24 14.18 92.24 14.89 92.22C15.6 92.19 16.31 92.07 17.02 91.95C17.73 91.83 18.44 91.58 19.15 91.42C19.86 91.26 20.57 91.18 21.28 90.98C21.99 90.79 22.7 90.44 23.4 90.07C24.11 89.7 24.82 89.22 25.53 88.65C26.24 88.08 26.95 87.33 27.66 86.45C28.37 85.57 29.08 84.27 29.79 83.18C30.5 82.09 31.21 81.29 31.91 79.92C32.62 78.54 33.33 76.29 34.04 74.33C34.75 72.38 35.46 70.29 36.17 68.15C36.88 66.01 37.59 63.33 38.3 61.47C39.01 59.6 39.72 58.57 40.43 56.67C41.13 54.76 41.84 51.52 42.55 49.58C43.26 47.65 43.97 45.66 44.68 44.67C45.39 43.67 46.1 43.42 46.81 42.53C47.52 41.64 48.23 39.94 48.94 38.97C49.65 37.99 50.35 37.17 51.06 36.5C51.77 35.83 52.48 35.37 53.19 34.78C53.9 34.19 54.61 33.49 55.32 32.97C56.03 32.45 56.74 32.15 57.45 31.6C58.16 31.05 58.87 29.5 59.57 29.5C60.28 29.5 60.99 29.52 61.7 29.57C62.41 29.61 63.12 41.82 63.83 42.02C64.54 42.21 65.25 42.13 65.96 42.32C66.67 42.5 67.38 45.22 68.09 46.67C68.79 48.12 69.5 49.73 70.21 51.02C70.92 52.3 71.63 53.2 72.34 54.47C73.05 55.73 73.76 57.15 74.47 58.68C75.18 60.22 75.89 62.07 76.6 63.73C77.3 65.39 78.01 67.22 78.72 68.65C79.43 70.08 80.14 71.19 80.85 72.47C81.56 73.75 82.27 75.11 82.98 76.33C83.69 77.56 84.4 78.68 85.11 79.85C85.82 81.02 86.52 82.42 87.23 83.37C87.94 84.31 88.65 85.03 89.36 85.73C90.07 86.44 90.78 87.09 91.49 87.65C92.2 88.21 92.91 88.69 93.62 89.15C94.33 89.61 95.04 90.12 95.74 90.45C96.45 90.78 97.16 91.02 97.87 91.25C98.58 91.48 99.29 91.65 100 91.85"/></svg>
  <div class="ch-x"><span style="--at:0">00:00</span><span style="--at:0.25">06:00</span><span style="--at:0.5">12:00</span><span style="--at:0.75">18:00</span><span style="--at:1">00:00</span></div>
</div>
</figure>

Stacks show a total and its parts. Each layer is closed against the one below, with a 30% tint and its line on top. Put the largest, steadiest series at the bottom so the others have a flat floor to be read against.

Anatomy

MonWedFri

Code

<div class="plot" style="--h:8rem">
  <div class="ch-grid">
    <i style="--at:0" data-v="0"></i><i style="--at:.5" data-v="50"></i><i style="--at:1" data-v="100"></i>
  </div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
    <path class="ch-fill s1" d="M0 80L25 60L50 66L75 30L100 40L100 100L0 100Z"/>
    <path class="ch-line s1" d="M0 80L25 60L50 66L75 30L100 40"/>
  </svg>
  <i class="ch-thr warn" style="--at:.6" data-v="limit"></i>
  <i class="ch-dot s1" style="--x:.75;--y:.7"></i>
  <div class="ch-x"><span style="--at:0">Mon</span><span style="--at:.5">Wed</span><span style="--at:1">Fri</span></div>
</div>

Class	On	What it does
`.plot`	div	The plot box. `--h` sets the height (12rem), `--yw` the label gutter (2.5rem). `.no-y` and `.no-x` drop a gutter.
`.ch-grid > i`	i	A gridline at `--at` (0 is the bottom). `data-v` is its label. The first line is the baseline and is stronger. `.dashed` on the grid for dashed lines.
`.ch-x > span`	span	An x label at `--at`. The first and last align to the edges; add `.mid` to centre them instead.
`.ch-line`	path	A series line. Colour from `.s1` to `.s6`. Modifiers: thin, dash, muted.
`.ch-fill`	path	An area under a line at 12%. `.strong` for stacks (30% on the surface).
`.ch-thr`	i	A dashed threshold at `--at`, label from `data-v`. Red by default; warn and ok.
`.ch-band`	i	A shaded window from `--x` for `--w`. Red by default; warn and muted.
`.ch-mark`	i	An event at `--x`, accent diamond on top, label from `data-v`. warn, down and muted recolour it.
`.ch-dot`	i	A point at `--x`, `--y`, ringed in the surface colour.
`.ch-cross / .ch-tip / .ch-hit`	div	Crosshair, tooltip and hover area. `src/scripts/hover.ts` adds them to any `.plot[data-hover]`.

Making the paths

Any library that returns SVG path data works, such as d3-shape. This site uses a small helper, src/lib/chart.ts: ticks() picks round gridline values, smooth() draws a monotone curve that never overshoots the data, area() and stack() build fills, and pos() turns a value into the 0 to 1 number that --at, --x and --y expect.

A title that says what is measured, and a sub-line with the unit and bucket.
Neutral for the baseline series, strong colours for what matters.
Status colours for thresholds and incidents only.

Don't

More than four lines on one chart. Split it, or use small multiples.
Dual y axes. Two charts with the same x are easier to read.
Smoothing that hides spikes: use line() for spiky data like error counts.

Accessibility

The plot is one image: role="img" with a label that states the takeaway, not the axes.
Hover is a convenience. Exact values belong in a table or a download next to the chart.
Past two series, label lines directly or keep the legend next to the plot, so colour is never the only key.