Bar Chart Legend - Everyday Interface Patterns

A small static bar chart shows three pinned categories with visible labels, values, and a text legend.

Program

A simple bar chart can stay readable when every bar has a visible label and value. This lesson uses fixed categories only.

bar_chart_legend.html

Visuals: captured from real browser rendering

<section class="bar-chart" aria-labelledby="chart-title">
  <h2 id="chart-title">Weekly signups</h2>
  <dl class="bars">
    <div><dt>Mon</dt><dd><span style="--value: 24%">24</span></dd></div>
    <div><dt>Wed</dt><dd><span style="--value: 36%">36</span></dd></div>
    <div><dt>Fri</dt><dd><span style="--value: 18%">18</span></dd></div>
  </dl>
  <p class="legend">Legend: bar length compares pinned signup counts.</p>
</section>
<style>
  .bar-chart { display: grid; gap: 10px; max-width: 34rem; border: 1px solid #94a3b8; padding: 12px; }
  .bars { display: grid; gap: 8px; margin: 0; }
  .bars div { display: grid; grid-template-columns: 4rem 1fr; gap: 8px; align-items: center; }
  .bars dd { margin: 0; background: #e2e8f0; }
  .bars span { display: block; width: var(--value); min-width: 2rem; padding: 4px; background: #0f766e; color: white; }
  .legend { margin: 0; color: #475569; }
</style>

Label the bar chart.
The chart is labelled by its visible heading.
Use label and value pairs.
The bars are represented as category and value pairs.
Show the first pinned category.
The first row pairs Monday with value 24.
Show the largest pinned value.
The Wednesday row has the largest fixed value.
Show the third pinned category.
The Friday row completes the three-category chart.
Check the chart legend.
The chart shows labels, values, fixed widths, and a text legend.

label and value Each bar has a category label and visible number.

static bars The bar widths are fixed style values.

legend text A short legend explains how to read the bars.