revenue chart
Accessible summary text belongs near each chart.
Athena UI
Charts
Chart.js examples with accessible summaries.
bar chart
Accessible summary text belongs near each chart.
doughnut chart
Accessible summary text belongs near each chart.
radar chart
Accessible summary text belongs near each chart.
<section class="row g-4">
<div class="col-12 col-xl-6"><article class="athena-card p-4"><h2 class="h4 text-capitalize">revenue chart</h2><canvas data-athena-chart="revenue" height="150" aria-label="revenue sample chart" role="img"></canvas><p class="athena-chart-summary">Accessible summary text belongs near each chart.</p></article></div>
<div class="col-12 col-xl-6"><article class="athena-card p-4"><h2 class="h4 text-capitalize">bar chart</h2><canvas data-athena-chart="bar" height="150" aria-label="bar sample chart" role="img"></canvas><p class="athena-chart-summary">Accessible summary text belongs near each chart.</p></article></div>
<div class="col-12 col-xl-6"><article class="athena-card p-4"><h2 class="h4 text-capitalize">doughnut chart</h2><canvas data-athena-chart="doughnut" height="150" aria-label="doughnut sample chart" role="img"></canvas><p class="athena-chart-summary">Accessible summary text belongs near each chart.</p></article></div>
<div class="col-12 col-xl-6"><article class="athena-card p-4"><h2 class="h4 text-capitalize">radar chart</h2><canvas data-athena-chart="radar" height="150" aria-label="radar sample chart" role="img"></canvas><p class="athena-chart-summary">Accessible summary text belongs near each chart.</p></article></div>
</section>