Chart

The frame around a plot: title, legend, the plot, and the line saying where the numbers came from and as of when.

Three series

Reported petrol price by state

Lagos
Abuja
Kano

Reported prices across six outlets, May to November 2026. Official NBS figures for the same series end in May 2026.

HTML

<figure class="p234-chart">
  <div class="p234-chart__head">
    <h3 class="p234-chart__title">Reported petrol price by state</h3>
    <ul class="p234-chart__legend">
      <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-1)"></span>Lagos</li>
      <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-2)"></span>Abuja</li>
      <li class="p234-chart__key"><span class="p234-chart__swatch" style="background:var(--p234-color-chart-series-3)"></span>Kano</li>
    </ul>
  </div>
  <svg class="p234-chart__plot" viewBox="0 0 560 220" role="img" aria-label="Reported petrol price by state, May to November 2026. Lagos rises from about 1100 to about 1380 naira, Abuja and Kano follow slightly lower.">
    <g stroke="var(--p234-color-chart-grid)" stroke-width="var(--p234-chart-grid-width)">
      <line x1="44" y1="30" x2="540" y2="30"></line>
      <line x1="44" y1="75" x2="540" y2="75"></line>
      <line x1="44" y1="120" x2="540" y2="120"></line>
      <line x1="44" y1="165" x2="540" y2="165"></line>
    </g>
    <line x1="44" y1="190" x2="540" y2="190" stroke="var(--p234-color-chart-axis)" stroke-width="1"></line>
    <g fill="var(--p234-color-ink-muted)" font-family="var(--p234-font-family-text)" font-size="11">
      <text x="38" y="34" text-anchor="end">1400</text>
      <text x="38" y="79" text-anchor="end">1300</text>
      <text x="38" y="124" text-anchor="end">1200</text>
      <text x="38" y="169" text-anchor="end">1100</text>
      <text x="44" y="206">May</text>
      <text x="292" y="206" text-anchor="middle">Aug</text>
      <text x="540" y="206" text-anchor="end">Nov</text>
    </g>
    <g fill="none" stroke-width="var(--p234-chart-line-width)" stroke-linejoin="round" stroke-linecap="round">
      <polyline points="44,170 143,150 242,118 341,96 440,62 540,40" stroke="var(--p234-color-chart-series-1)"></polyline>
      <polyline points="44,176 143,162 242,134 341,120 440,88 540,70" stroke="var(--p234-color-chart-series-2)"></polyline>
      <polyline points="44,182 143,174 242,152 341,140 440,112 540,96" stroke="var(--p234-color-chart-series-3)"></polyline>
    </g>
  </svg>
  <figcaption class="p234-chart__source">Reported prices across six outlets, May to November 2026. Official NBS figures for the same series end in May 2026.</figcaption>
</figure>

The source line is not optional

Every chart here mixes two kinds of number: an official series that runs months behind, and reporting that does not. A plot without a line saying which it is, and as of when, is the specific way this product misleads people.

Rules

Give the SVG role="img" and an aria-label that says what the chart shows and what it does, not just its title.
Offer the numbers as a table too. For a price series that is often what the reader actually wanted.
Keep a legend for two or more series, and direct-label four or fewer.
Use the series colours in their fixed order from the chart foundations.

Never two y-axes. Two measures on different scales become two charts, or both indexed to a common base.
Never a number on every point. Label the ends, the peak, and the point under discussion.
Never more than five series; past three, direct labels are required. The reason is on the foundations page.
Never colour the axis labels to match the series.

On a phone

Most readers see this at about 360px wide. Drop to fewer gridlines and fewer x labels rather than shrinking the type below the caption size, and let the plot keep its aspect ratio so the trend stays readable.

Tokens this component reads

--p234-color-chart-series-1--p234-color-chart-series-2--p234-color-chart-series-3--p234-color-chart-axis--p234-color-chart-grid--p234-color-ink--p234-color-ink-muted--p234-color-ink-subtle--p234-chart-line-width--p234-chart-grid-width--p234-type-headline-sm-*--p234-type-ui-sm-*--p234-type-caption-*--p234-measure-wide