In my project, I have a doughnut graph. But I want it to look like a speedometer. I created the donut graph using chart.js (html,css,js). I merely want to show it half-way or as a speedometer. Here is the sample of i want it to display like – enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>180-Degree Donut Chart</title>
<style>
/* CSS styles */
body {
font-family: Arial, sans-serif;
text-align: center;
}
.donut-container {
text-align: center;
margin-top: 20px;
}
.chart-container {
width: 100%; /* Make the container responsive */
max-width: 500px; /* Optionally, set a maximum width */
margin: 0 auto; /* Center the container */
}
</style>
</head>
<body>
<div class="donut-container">
<div class="chart-container">
<canvas id="donut-chart"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Data for the donut chart (Group 2 first, then Group 1)
const data = {
labels: ['Group 2', 'Group 1'], // Swap the order of labels
datasets: [{
data: [30, 70], // Swap the order of data values
backgroundColor: ['#A1A5B7', '#F1BC00'], // Colors for each group
}]
};
// Configuration for the chart
const config = {
type: 'doughnut', // Use doughnut chart type for a donut chart
data: data,
options: {
rotation: 0.5 * Math.PI, // Rotate the chart to 180 degrees
cutout: '70%', // Cutout percentage for a 180-degree chart
plugins: {
legend: {
display: false, // Hide the legend if not needed
},
},
},
};
// Get the canvas element and create the chart
const canvas = document.getElementById('donut-chart');
const ctx = canvas.getContext('2d');
new Chart(ctx, config);
</script>
</body>
</html>