Line Chart

Values plotted over time/axis.

html

<div class="line-chart line-chart--rising" style="--accent:#BFD9F2;max-width:320px;">
  <svg class="line-chart__chart" viewBox="0 0 220 122" role="img" aria-label="Line chart showing a rising trend in revenue, in dollars thousands, across six months from January to June">
    <line x1="10" y1="100" x2="210" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="10" x2="10" y2="100" stroke="#241430" stroke-width="1.5" />
      <text x="4" y="103" font-size="8" fill="#241430" text-anchor="start">$0k</text>
      <text x="4" y="58" font-size="8" fill="#241430" text-anchor="start">$50k</text>
      <text x="4" y="14" font-size="8" fill="#241430" text-anchor="start">$100k</text>
      <text x="10" y="112" font-size="8" fill="#241430" text-anchor="middle">Jan</text>
      <text x="50" y="112" font-size="8" fill="#241430" text-anchor="middle">Feb</text>
      <text x="90" y="112" font-size="8" fill="#241430" text-anchor="middle">Mar</text>
      <text x="130" y="112" font-size="8" fill="#241430" text-anchor="middle">Apr</text>
      <text x="170" y="112" font-size="8" fill="#241430" text-anchor="middle">May</text>
      <text x="210" y="112" font-size="8" fill="#241430" text-anchor="middle">Jun</text>
    <polyline class="line-chart__line line-chart__line--rising" points="10,90 50,75 90,60 130,45 170,30 210,20" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    <polyline class="line-chart__line line-chart__line--falling" points="10,20 50,30 90,45 130,60 170,75 210,90" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    <polyline class="line-chart__line line-chart__line--flat" points="10,55 50,58 90,52 130,56 170,54 210,57" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    
    <g class="line-chart__points line-chart__points--rising">
      <circle class="line-chart__point" cx="10" cy="90" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="50" cy="75" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="90" cy="60" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="130" cy="45" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="170" cy="30" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="210" cy="20" r="3.5" fill="var(--accent)" />
    </g>
    <g class="line-chart__points line-chart__points--falling">
      <circle class="line-chart__point" cx="10" cy="20" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="50" cy="30" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="90" cy="45" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="130" cy="60" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="170" cy="75" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="210" cy="90" r="3.5" fill="var(--accent)" />
    </g>
    <g class="line-chart__points line-chart__points--flat">
      <circle class="line-chart__point" cx="10" cy="55" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="50" cy="58" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="90" cy="52" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="130" cy="56" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="170" cy="54" r="3.5" fill="var(--accent)" />
        <circle class="line-chart__point" cx="210" cy="57" r="3.5" fill="var(--accent)" />
    </g>
    
  </svg>
</div>
<style>
.line-chart__chart { display: block; width: 100%; height: auto; }
.line-chart__line, .line-chart__points { display: none; }
.line-chart--rising .line-chart__line--rising,
.line-chart--falling .line-chart__line--falling,
.line-chart--flat .line-chart__line--flat { display: block; }
.line-chart--rising .line-chart__points--rising,
.line-chart--falling .line-chart__points--falling,
.line-chart--flat .line-chart__points--flat { display: block; }
</style>

tailwind

<div class="line-chart-tw line-chart-tw--rising max-w-[320px]" style="--accent:#BFD9F2;">
  <svg class="block w-full h-auto" viewBox="0 0 220 122" role="img" aria-label="Line chart showing a rising trend in revenue, in dollars thousands, across six months from January to June">
    <line x1="10" y1="100" x2="210" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="10" x2="10" y2="100" stroke="#241430" stroke-width="1.5" />
      <text x="4" y="103" font-size="8" fill="#241430" text-anchor="start">$0k</text>
      <text x="4" y="58" font-size="8" fill="#241430" text-anchor="start">$50k</text>
      <text x="4" y="14" font-size="8" fill="#241430" text-anchor="start">$100k</text>
      <text x="10" y="112" font-size="8" fill="#241430" text-anchor="middle">Jan</text>
      <text x="50" y="112" font-size="8" fill="#241430" text-anchor="middle">Feb</text>
      <text x="90" y="112" font-size="8" fill="#241430" text-anchor="middle">Mar</text>
      <text x="130" y="112" font-size="8" fill="#241430" text-anchor="middle">Apr</text>
      <text x="170" y="112" font-size="8" fill="#241430" text-anchor="middle">May</text>
      <text x="210" y="112" font-size="8" fill="#241430" text-anchor="middle">Jun</text>
    <polyline class="line-chart-tw__line line-chart-tw__line--rising" points="10,90 50,75 90,60 130,45 170,30 210,20" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    <polyline class="line-chart-tw__line line-chart-tw__line--falling" points="10,20 50,30 90,45 130,60 170,75 210,90" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    <polyline class="line-chart-tw__line line-chart-tw__line--flat" points="10,55 50,58 90,52 130,56 170,54 210,57" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
    
    <g class="line-chart-tw__points line-chart-tw__points--rising">
      <circle class="line-chart-tw__point" cx="10" cy="90" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="50" cy="75" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="90" cy="60" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="130" cy="45" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="170" cy="30" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="210" cy="20" r="3.5" fill="var(--accent)" />
    </g>
    <g class="line-chart-tw__points line-chart-tw__points--falling">
      <circle class="line-chart-tw__point" cx="10" cy="20" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="50" cy="30" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="90" cy="45" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="130" cy="60" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="170" cy="75" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="210" cy="90" r="3.5" fill="var(--accent)" />
    </g>
    <g class="line-chart-tw__points line-chart-tw__points--flat">
      <circle class="line-chart-tw__point" cx="10" cy="55" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="50" cy="58" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="90" cy="52" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="130" cy="56" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="170" cy="54" r="3.5" fill="var(--accent)" />
        <circle class="line-chart-tw__point" cx="210" cy="57" r="3.5" fill="var(--accent)" />
    </g>
    
  </svg>
</div>
<style>
.line-chart-tw__line, .line-chart-tw__points { display: none; }
.line-chart-tw--rising .line-chart-tw__line--rising,
.line-chart-tw--falling .line-chart-tw__line--falling,
.line-chart-tw--flat .line-chart-tw__line--flat { display: block; }
.line-chart-tw--rising .line-chart-tw__points--rising,
.line-chart-tw--falling .line-chart-tw__points--falling,
.line-chart-tw--flat .line-chart-tw__points--flat { display: block; }
</style>

react

export function LineChart({
  trend = "rising",
  showPoints = true,
  accent = "#BFD9F2",
  strokeWidth = 2.5,
}) {
  const xs = [10,50,90,130,170,210];
  const months = ["Jan","Feb","Mar","Apr","May","Jun"];
  const trends = {"rising":[90,75,60,45,30,20],"falling":[20,30,45,60,75,90],"flat":[55,58,52,56,54,57]};
  const ys = trends[trend] ?? trends.rising;
  const points = xs.map((x, i) => `${x},${ys[i]}`).join(" ");
  return (
    <div style={{ maxWidth: 320 }}>
      <svg viewBox="0 0 220 122" role="img" style={{ display: "block", width: "100%", height: "auto" }}
        aria-label={`Line chart showing a ${trend} trend in revenue, in dollars thousands, across six months from January to June`}>
        <line x1={10} y1={100} x2={210} y2={100} stroke="#241430" strokeWidth={1.5} />
        <line x1={10} y1={10} x2={10} y2={100} stroke="#241430" strokeWidth={1.5} />
        <text x={4} y={103} fontSize={8} fill="#241430">$0k</text>
        <text x={4} y={58} fontSize={8} fill="#241430">$50k</text>
        <text x={4} y={14} fontSize={8} fill="#241430">$100k</text>
        {xs.map((x, i) => (
          <text key={x} x={x} y={112} fontSize={8} fill="#241430" textAnchor="middle">{months[i]}</text>
        ))}
        <polyline points={points} fill="none" stroke={accent} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
        {showPoints && ys.map((y, i) => (
          <circle key={i} cx={xs[i]} cy={y} r={3.5} fill={accent} />
        ))}
      </svg>
    </div>
  );
}