On Apple Health, there is a fascinating article titled "Learn About Cardio Fitness" (located in the Browse tab at the bottom > Activity, then scroll down). While reading the article, I came across a chart that caught my eye, and I am eager to replicate it in HTML.
Here is the chart that I am referring to...
Here are the questions I have:
- After exploring the official Chart.js documentation, I noticed a "Randomize" button that can smoothly switch between data. How can I incorporate Bootstrap tabs to achieve a similar data-switching effect like the one in the Apple Health article?
- How can I include number labels in the bars and disable the hover feature?
- Bonus: I attempted to use the code from this Stack Overflow post to rotate the "VO2 max" label horizontally, but it didn't work, possibly due to using chart.js 4.3.0. Any suggestions?
Below is the code and data I have assembled so far (I completely forgot to include the Male/Female/All tab *facepalm*):
function createChart(id, data) {
const ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['20-29', '30-39', '40-49', '50-59', '60+'],
datasets: data
},
options: {
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'Age Ranges',
align: 'start'
}
},
y: {
stacked: true,
title: {
display: true,
text: 'VO2 max',
align: 'end'
},
position: 'right'
}
},
plugins: {
legend: {
display: false
}
}
}
});
}
const lowData = [{
label: 'Low',
data: {
"20-29": [29, 38],
"30-39": [27, 34],
"40-49": [24, 31],
"50-59": [21, 26],
"60+": [17, 18]
},
}];
... (data continues)
createChart('lowChart', lowData);
createChart('belowAverageChart', belowAverageData);
createChart('aboveAverageChart', aboveAverageData);
createChart('highChart', highData);
const triggerTabList = document.querySelectorAll('#chartTabs button')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
})<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e8598859b">[email protected]</a>/dist/css/bootstrap.min.css">
<ul class="nav nav-pills" id="chartTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="low-tab" data-bs-toggle="tab" data-bs-target="#low" type="button" role="tab" aria-controls="low" aria-selected="true">Low</button>
</li>
... (HTML code continues)
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef3eef0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>