Legend

Explains chart symbols/colours.

html

<ul class="legend legend--vertical legend--count-3">
    <li class="legend__item legend__item--1">
      <span class="legend__swatch" style="background:#A8E6C1;" aria-hidden="true"></span>
      <span class="legend__label">Series A &mdash; 42%</span>
    </li>
    <li class="legend__item legend__item--2">
      <span class="legend__swatch" style="background:#F5C2E0;background-image:repeating-linear-gradient(45deg,#241430 0 2px,transparent 2px 5px);" aria-hidden="true"></span>
      <span class="legend__label">Series B &mdash; 28%</span>
    </li>
    <li class="legend__item legend__item--3">
      <span class="legend__swatch" style="background:#BFD9F2;background-image:radial-gradient(#241430 1px,transparent 1px);background-size:5px 5px;" aria-hidden="true"></span>
      <span class="legend__label">Series C &mdash; 18%</span>
    </li>
    <li class="legend__item legend__item--4">
      <span class="legend__swatch" style="background:#E8A020;background-image:repeating-linear-gradient(0deg,#241430 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#241430 0 1px,transparent 1px 4px);" aria-hidden="true"></span>
      <span class="legend__label">Series D &mdash; 12%</span>
    </li>
</ul>
<style>
.legend { list-style: none; margin: 0; padding: 0; font: 14px/1.4 system-ui, sans-serif; color: #241430; display: flex; gap: 14px; }
.legend--vertical { flex-direction: column; gap: 8px; }
.legend--horizontal { flex-direction: row; flex-wrap: wrap; }
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid #24143033; }
.legend--count-2 .legend__item:nth-child(n+3) { display: none; }
.legend--count-3 .legend__item:nth-child(n+4) { display: none; }
</style>

tailwind

<ul class="legend-tw legend-tw--vertical legend-tw--count-3 list-none m-0 p-0 font-sans text-sm text-[#241430] flex gap-3.5">
    <li class="legend-tw__item legend-tw__item--1 flex items-center gap-2">
      <span class="w-3.5 h-3.5 rounded border border-[#24143033]" style="background:#A8E6C1;" aria-hidden="true"></span>
      <span>Series A &mdash; 42%</span>
    </li>
    <li class="legend-tw__item legend-tw__item--2 flex items-center gap-2">
      <span class="w-3.5 h-3.5 rounded border border-[#24143033]" style="background:#F5C2E0;background-image:repeating-linear-gradient(45deg,#241430 0 2px,transparent 2px 5px);" aria-hidden="true"></span>
      <span>Series B &mdash; 28%</span>
    </li>
    <li class="legend-tw__item legend-tw__item--3 flex items-center gap-2">
      <span class="w-3.5 h-3.5 rounded border border-[#24143033]" style="background:#BFD9F2;background-image:radial-gradient(#241430 1px,transparent 1px);background-size:5px 5px;" aria-hidden="true"></span>
      <span>Series C &mdash; 18%</span>
    </li>
    <li class="legend-tw__item legend-tw__item--4 flex items-center gap-2">
      <span class="w-3.5 h-3.5 rounded border border-[#24143033]" style="background:#E8A020;background-image:repeating-linear-gradient(0deg,#241430 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#241430 0 1px,transparent 1px 4px);" aria-hidden="true"></span>
      <span>Series D &mdash; 12%</span>
    </li>
</ul>
<style>
.legend-tw--vertical { flex-direction: column; gap: 8px; }
.legend-tw--horizontal { flex-direction: row; flex-wrap: wrap; }
.legend-tw--count-2 .legend-tw__item:nth-child(n+3) { display: none; }
.legend-tw--count-3 .legend-tw__item:nth-child(n+4) { display: none; }
</style>

react

export function Legend({
  seriesCount = "3",
  layout = "vertical",
  accent = "#A8E6C1",
  showValues = true,
}) {
  const series = [{"name":"Series A","value":"42%","pattern":"solid"},{"name":"Series B","value":"28%","pattern":"stripes"},{"name":"Series C","value":"18%","pattern":"dots"},{"name":"Series D","value":"12%","pattern":"cross"}];
  const fixedColors = ["", "#F5C2E0", "#BFD9F2", "#E8A020"];
  const patternStyle = (i) => {
    if (i === 0) return { background: accent };
    if (i === 1) return { background: fixedColors[1], backgroundImage: "repeating-linear-gradient(45deg,#241430 0 2px,transparent 2px 5px)" };
    if (i === 2) return { background: fixedColors[2], backgroundImage: "radial-gradient(#241430 1px,transparent 1px)", backgroundSize: "5px 5px" };
    return {
      background: fixedColors[3],
      backgroundImage: "repeating-linear-gradient(0deg,#241430 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#241430 0 1px,transparent 1px 4px)",
    };
  };
  const count = Number(seriesCount);
  const visible = series.slice(0, count);
  return (
    <ul style={{
      listStyle: "none", margin: 0, padding: 0, font: "14px/1.4 system-ui, sans-serif", color: "#241430",
      display: "flex", flexDirection: layout === "vertical" ? "column" : "row",
      flexWrap: layout === "horizontal" ? "wrap" : "nowrap", gap: layout === "vertical" ? 8 : 14,
    }}>
      {visible.map((s, i) => (
        <li key={s.name} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span aria-hidden="true" style={{ width: 14, height: 14, borderRadius: 3, border: "1px solid #24143033", ...patternStyle(i) }} />
          <span>{s.name}{showValues && ` \u2014 ${s.value}`}</span>
        </li>
      ))}
    </ul>
  );
}