Display a bar chart with impact on CTR scores for different metadata aspects.

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="metaLengthChart" style="max-width:100%;height:400px;"></canvas>
</div>

</section>

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

JavaScript

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

new Chart(ctx, {
type: 'bar',
data: {
labels: [
"Proper Length",
"Too Long (Truncated)",
"Too Short",
"Keyword Placement",
"Readability"
],
datasets: [{
label: "Impact on CTR (Score 1-10)",
data: [9,5,6,8,9]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: true }
},
scales: {
y: { beginAtZero: true }
}
}
});