Area Chart

Filled line chart.

html

<figure class="area-chart-demo" style="--accent:#BFD9F2;">
  <figcaption class="area-chart-demo__title">Monthly revenue &mdash; rising trend</figcaption>
  <svg class="area-chart-demo__svg area-chart-demo__svg--rising" viewBox="0 0 300 130" style="height:140px;" role="img" aria-label="Area chart of monthly revenue from January to June, showing a rising trend, values between 8 thousand and 48 thousand dollars">
    <g class="area-chart-demo__grid" aria-hidden="true">
      
      <line x1="30" x2="300" y1="20" y2="20" class="area-chart-demo__gridline" />
      <line x1="30" x2="300" y1="55" y2="55" class="area-chart-demo__gridline" />
      <line x1="30" x2="300" y1="90" y2="90" class="area-chart-demo__gridline" />
      
    </g>
    <g aria-hidden="true">
      <text x="26" y="24" class="area-chart-demo__tick">48k</text>
      <text x="26" y="59" class="area-chart-demo__tick">28k</text>
      <text x="26" y="94" class="area-chart-demo__tick">8k</text>
      <line x1="30" y1="10" x2="30" y2="110" class="area-chart-demo__axisline" />
      <line x1="30" y1="110" x2="300" y2="110" class="area-chart-demo__axisline" />
    </g>
    <path class="area-chart-demo__fill area-chart-demo__fill--rising" d="M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z" />
    <path class="area-chart-demo__line area-chart-demo__line--rising" d="M30,100 L80,85 L130,72 L180,55 L230,35 L280,15" />
    <path class="area-chart-demo__fill area-chart-demo__fill--volatile" d="M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z" />
    <path class="area-chart-demo__line area-chart-demo__line--volatile" d="M30,60 L80,20 L130,80 L180,30 L230,90 L280,45" />
    <path class="area-chart-demo__fill area-chart-demo__fill--declining" d="M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z" />
    <path class="area-chart-demo__line area-chart-demo__line--declining" d="M30,15 L80,35 L130,50 L180,65 L230,85 L280,100" />
    <g class="area-chart-demo__months" aria-hidden="true">
      <text x="30" y="122">Jan</text><text x="80" y="122">Feb</text><text x="130" y="122">Mar</text>
      <text x="180" y="122">Apr</text><text x="230" y="122">May</text><text x="280" y="122">Jun</text>
    </g>
  </svg>
</figure>
<style>
.area-chart-demo { font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border: 1.5px solid #24143022; border-radius: 12px; box-sizing: border-box; max-width: 640px; }
.area-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.area-chart-demo__svg { width: 100%; display: block; overflow: visible; }
.area-chart-demo__gridline { stroke: #24143014; stroke-width: 1; }
.area-chart-demo__axisline { stroke: #24143055; stroke-width: 1; }
.area-chart-demo__tick { font-size: 9px; fill: #24143099; text-anchor: end; }
.area-chart-demo__months text { font-size: 9px; fill: #24143099; text-anchor: middle; }
.area-chart-demo__fill { fill: var(--accent); fill-opacity: .35; stroke: none; display: none; }
.area-chart-demo__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: none; }
.area-chart-demo__svg--rising .area-chart-demo__fill--rising, .area-chart-demo__svg--rising .area-chart-demo__line--rising { display: block; }
.area-chart-demo__svg--volatile .area-chart-demo__fill--volatile, .area-chart-demo__svg--volatile .area-chart-demo__line--volatile { display: block; }
.area-chart-demo__svg--declining .area-chart-demo__fill--declining, .area-chart-demo__svg--declining .area-chart-demo__line--declining { display: block; }
</style>

tailwind

<figure class="area-chart-tw max-w-[640px] p-4 border-[1.5px] border-[#24143022] rounded-xl box-border font-sans text-[#241430] bg-[#FAF7F2]" style="--accent:#BFD9F2;">
  <figcaption class="text-[13px] font-semibold mb-2.5">Monthly revenue &mdash; rising trend</figcaption>
  <svg class="area-chart-tw__svg area-chart-tw__svg--rising w-full block" style="height:140px;overflow:visible;" viewBox="0 0 300 130" role="img" aria-label="Area chart of monthly revenue from January to June, showing a rising trend, values between 8 thousand and 48 thousand dollars">
    <g aria-hidden="true">
      
      <line x1="30" x2="300" y1="20" y2="20" stroke="#24143014" />
      <line x1="30" x2="300" y1="55" y2="55" stroke="#24143014" />
      <line x1="30" x2="300" y1="90" y2="90" stroke="#24143014" />
      
    </g>
    <g aria-hidden="true">
      <text x="26" y="24" font-size="9" fill="#24143099" text-anchor="end">48k</text>
      <text x="26" y="59" font-size="9" fill="#24143099" text-anchor="end">28k</text>
      <text x="26" y="94" font-size="9" fill="#24143099" text-anchor="end">8k</text>
      <line x1="30" y1="10" x2="30" y2="110" stroke="#24143055" />
      <line x1="30" y1="110" x2="300" y2="110" stroke="#24143055" />
    </g>
    <path class="area-chart-tw__fill area-chart-tw__fill--rising" d="M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z" />
    <path class="area-chart-tw__line area-chart-tw__line--rising" d="M30,100 L80,85 L130,72 L180,55 L230,35 L280,15" />
    <path class="area-chart-tw__fill area-chart-tw__fill--volatile" d="M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z" />
    <path class="area-chart-tw__line area-chart-tw__line--volatile" d="M30,60 L80,20 L130,80 L180,30 L230,90 L280,45" />
    <path class="area-chart-tw__fill area-chart-tw__fill--declining" d="M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z" />
    <path class="area-chart-tw__line area-chart-tw__line--declining" d="M30,15 L80,35 L130,50 L180,65 L230,85 L280,100" />
    <g aria-hidden="true">
      <text x="30" y="122" font-size="9" fill="#24143099" text-anchor="middle">Jan</text>
      <text x="80" y="122" font-size="9" fill="#24143099" text-anchor="middle">Feb</text>
      <text x="130" y="122" font-size="9" fill="#24143099" text-anchor="middle">Mar</text>
      <text x="180" y="122" font-size="9" fill="#24143099" text-anchor="middle">Apr</text>
      <text x="230" y="122" font-size="9" fill="#24143099" text-anchor="middle">May</text>
      <text x="280" y="122" font-size="9" fill="#24143099" text-anchor="middle">Jun</text>
    </g>
  </svg>
</figure>
<style>
.area-chart-tw__fill { fill: var(--accent); fill-opacity: .35; stroke: none; display: none; }
.area-chart-tw__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: none; }
.area-chart-tw__svg--rising .area-chart-tw__fill--rising, .area-chart-tw__svg--rising .area-chart-tw__line--rising { display: block; }
.area-chart-tw__svg--volatile .area-chart-tw__fill--volatile, .area-chart-tw__svg--volatile .area-chart-tw__line--volatile { display: block; }
.area-chart-tw__svg--declining .area-chart-tw__fill--declining, .area-chart-tw__svg--declining .area-chart-tw__line--declining { display: block; }
</style>

react

export function AreaChart({
  trend = "rising",
  accent = "#BFD9F2",
  showGrid = true,
  height = 140,
}) {
  const shapes = {
    rising: { fill: "M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z", line: "M30,100 L80,85 L130,72 L180,55 L230,35 L280,15" },
    volatile: { fill: "M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z", line: "M30,60 L80,20 L130,80 L180,30 L230,90 L280,45" },
    declining: { fill: "M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z", line: "M30,15 L80,35 L130,50 L180,65 L230,85 L280,100" },
  }[trend];
  const label = "Area chart of monthly revenue from January to June, showing a " + trend + " trend, values between 8 thousand and 48 thousand dollars";
  return (
    <figure style={{ font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, border: "1.5px solid #24143022", borderRadius: 12, boxSizing: "border-box", maxWidth: 640 }}>
      <figcaption style={{ fontSize: 13, fontWeight: 600, margin: "0 0 10px" }}>Monthly revenue &mdash; {trend} trend</figcaption>
      <svg viewBox="0 0 300 130" style={{ width: "100%", height, display: "block", overflow: "visible" }} role="img" aria-label={label}>
        <g aria-hidden="true">
          {showGrid && (
            <>
              <line x1="30" x2="300" y1="20" y2="20" stroke="#24143014" />
              <line x1="30" x2="300" y1="55" y2="55" stroke="#24143014" />
              <line x1="30" x2="300" y1="90" y2="90" stroke="#24143014" />
            </>
          )}
        </g>
        <g aria-hidden="true">
          <text x="26" y="24" fontSize="9" fill="#24143099" textAnchor="end">48k</text>
          <text x="26" y="59" fontSize="9" fill="#24143099" textAnchor="end">28k</text>
          <text x="26" y="94" fontSize="9" fill="#24143099" textAnchor="end">8k</text>
          <line x1="30" y1="10" x2="30" y2="110" stroke="#24143055" />
          <line x1="30" y1="110" x2="300" y2="110" stroke="#24143055" />
        </g>
        <path d={shapes.fill} fill={accent} fillOpacity={0.35} stroke="none" />
        <path d={shapes.line} fill="none" stroke={accent} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
        <g aria-hidden="true">
          <text x="30" y="122" fontSize="9" fill="#24143099" textAnchor="middle">Jan</text>
          <text x="80" y="122" fontSize="9" fill="#24143099" textAnchor="middle">Feb</text>
          <text x="130" y="122" fontSize="9" fill="#24143099" textAnchor="middle">Mar</text>
          <text x="180" y="122" fontSize="9" fill="#24143099" textAnchor="middle">Apr</text>
          <text x="230" y="122" fontSize="9" fill="#24143099" textAnchor="middle">May</text>
          <text x="280" y="122" fontSize="9" fill="#24143099" textAnchor="middle">Jun</text>
        </g>
      </svg>
    </figure>
  );
}