I've been trying to create this design using HTML, CSS and JS (particularly chart.io). I am wondering if there is a better way to do this without relying much on JS. The reason for this is that, this particular screenshot below is for a report. So I need to make sure that the design renders graciously with all browsers. And if a user decides to save it as PDF, the report should not have any problem rendering on different PDF viewers. I'm worried about having too much JS as I've had issues before where the designs break in iOS and Acrobat.
For starters, I'll use 12 o'clock as the top most part of the progress.
- If the progress bar is exactly 12 o'clock, it has a blue gradient.
- If it less than 12 oclock, it has a faint green gradient and not filling up the whole progress.
- But if it goes beyond 12 o'clock, it's replaced by a purple gradient with the end having darker gradient and a curved end. The endings of the bar is also determined by how far it is from 12'oclock.
This is what I currently have at the moment.
Chart.register(ChartDataLabels);
const currentAge = 42;
const biologicalAge = 44.37;
const fullCircle = 440;
const percent = Math.min(biologicalAge / currentAge, 1);
const offset = fullCircle * (1 - percent);
document.querySelector("circle[stroke-dashoffset='{{DASH_OFFSET}}']")
.setAttribute("stroke-dashoffset", offset);
const ctx = document.getElementById('ageChart').getContext('2d');
const dataPoints = [40.44, 45.54, 44.37];
const ageChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan 2024', 'Apr 2024', 'Jul 2024'],
datasets: [{
label: 'Biological Age',
data: dataPoints,
fill: false,
tension: 0.4,
borderColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) return;
const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
gradient.addColorStop(0, '#36d1dc');
gradient.addColorStop(1, '#a646d7');
return gradient;
},
borderWidth: 3,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 20,
right: 20
}
},
scales: {
y: {
suggestedMin: 35,
suggestedMax: 50,
ticks: {
stepSize: 5
},
grid: {
drawTicks: true,
drawOnChartArea: true
}
},
x: {
grid: {
drawTicks: false,
drawOnChartArea: false,
drawBorder: false,
color: 'transparent',
lineWidth: 0
},
border: {
display: false
},
ticks: {
padding: 8
},
offset: true
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: ctx => `Age: ${ctx.raw}`
}
},
datalabels: {
align: 'center',
anchor: 'center',
formatter: (value) => value.toFixed(2),
backgroundColor: (context) => context.dataIndex === context.dataset.data.length - 1 ? '#000' : '#fff',
borderRadius: 999,
color: (context) => context.dataIndex === context.dataset.data.length - 1 ? '#fff' : '#000',
font: {
weight: 'bold'
},
padding: 6,
borderWidth: 1,
borderColor: '#000'
}
}
},
plugins: [ChartDataLabels]
}); body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
margin: 0;
padding: 2rem;
width: 700px;
}
.progress-container {
position: relative;
width: 160px;
height: 160px;
margin-bottom: 2rem;
}
.progress-container svg {
transform: rotate(-90deg);
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.progress-text h2 {
margin: 0;
font-size: 2rem;
}
.chart-container {
width: 440px;
height: 150px;
}<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Age Progress and Graph</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
</head>
<body>
<div class="progress-container">
<svg width="160" height="160">
<circle
cx="80"
cy="80"
r="70"
stroke="#eee"
stroke-width="8"
fill="none"
></circle>
<circle
cx="80"
cy="80"
r="70"
stroke="url(#gradient)"
stroke-width="8"
fill="none"
stroke-dasharray="440"
stroke-dashoffset="{{DASH_OFFSET}}"
stroke-linecap="round"
></circle>
<defs>
<linearGradient id="gradient" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a646d7" />
<stop offset="100%" stop-color="#e84fd1" />
</linearGradient>
</defs>
</svg>
<div class="progress-text">
<h2 style="font-weight:300;">44.37</h2>
<small>Older ⤴</small>
</div>
</div>
<div class="chart-container">
<canvas id="ageChart"></canvas>
</div>
</body>I would greatly appreciate if you could provide some recommendations or if you could help me with this. Thank you in advance.
