График

<figure class="chart" data-ui-chart="bars">
  <figcaption class="chart__title">Инцидентов по месяцам</figcaption>
  <ul class="chart__bars">
    <li class="chart__bar" data-value="6"><span class="chart__label">Май</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">6</span></li>
    <li class="chart__bar" data-value="4"><span class="chart__label">Июн</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">4</span></li>
    <li class="chart__bar chart__bar--muted" data-value="9"><span class="chart__label">Июл</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">9</span></li>
    <li class="chart__bar" data-value="3"><span class="chart__label">Авг</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">3</span></li>
    <li class="chart__bar" data-value="2"><span class="chart__label">Сен</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">2</span></li>
    <li class="chart__bar chart__bar--accent" data-value="1"><span class="chart__label">Окт</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">1</span></li>
  </ul>
</figure>

<figure class="chart chart--horizontal" data-ui-chart="bars">
  <figcaption class="chart__title">Участники по встречам</figcaption>
  <ul class="chart__bars">
    <li class="chart__bar chart__bar--accent" data-value="148"><span class="chart__label">Ретроспектива</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">148</span></li>
    <li class="chart__bar" data-value="96"><span class="chart__label">Планирование</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">96</span></li>
    <li class="chart__bar" data-value="52"><span class="chart__label">Обзор метрик</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">52</span></li>
    <li class="chart__bar" data-value="24"><span class="chart__label">Дежурства</span><span class="chart__col"><span class="chart__fill"></span></span><span class="chart__value">24</span></li>
  </ul>
</figure>

<figure class="chart" data-ui-chart="line" data-ui-values="210,220,215,260,300,340,310" data-ui-compare="200,205,210,208,212,215,214" data-ui-labels="Пн,Вт,Ср,Чт,Пт,Сб,Вс">
  <figcaption class="chart__title">Задержка ответа за неделю, мс</figcaption>
  <div class="chart__canvas"></div>
  <ul class="chart__legend">
    <li><span class="chart__swatch"></span>Эта неделя</li>
    <li><span class="chart__swatch chart__swatch--muted"></span>Прошлая неделя</li>
  </ul>
  <table class="visually-hidden">
    <caption>Задержка ответа по дням, мс</caption>
    <thead><tr><th>День</th><th>Эта неделя</th><th>Прошлая неделя</th></tr></thead>
    <tbody>
      <tr><td>Пн</td><td>210</td><td>200</td></tr><tr><td>Вт</td><td>220</td><td>205</td></tr><tr><td>Ср</td><td>215</td><td>210</td></tr>
      <tr><td>Чт</td><td>260</td><td>208</td></tr><tr><td>Пт</td><td>300</td><td>212</td></tr><tr><td>Сб</td><td>340</td><td>215</td></tr><tr><td>Вс</td><td>310</td><td>214</td></tr>
    </tbody>
  </table>
</figure>

<p>Нагрузка за сутки:
  <span class="chart chart--spark chart--safety" data-ui-chart="spark" data-ui-values="12,18,15,30,44,38,52,47" role="img" aria-label="Нагрузка за сутки: от 12 до 47 процентов"></span>
</p>