Display a bar chart representing SEO performance in different categories.

by seosharelink

HTML

<section style="background:#f9fafb;padding:25px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);max-width:100%;margin:30px 0;">

<div style="height:400px;position:relative;">
<canvas id="blogMetaChart" style="max-width:100%;height:400px;"></canvas>
</div>

</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

JavaScript

const ctx = document.getElementById('blogMetaChart').getContext('2d');

new Chart(ctx, {
type: 'bar',
data: {
labels: [
"Title Optimization",
"Meta Description Quality",
"Mobile Optimization",
"Duplicate Fix (Canonical)",
"Indexing Control"
],
datasets: [{
label: "Impact on SEO Performance (Score 1-10)",
data: [10,8,7,8,9]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true }
},
scales: {
y: { beginAtZero: true }
}
}
});