Display a bar chart with SEO issues and their negative impact.

by seosharelink

HTML

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

<section class="chart-box">
  <canvas id="metaMistakeChart"></canvas>
</section>

CSS

.chart-box{
  background:#f8fafc;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  max-width:700px;
  margin:auto;
  height: 300px;
}

JavaScript

const ctx = document.getElementById('metaMistakeChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [
      "Duplicate Meta Tags",
      "Keyword Stuffing",
      "Missing Descriptions",
      "Incorrect Length",
      "Irrelevant Descriptions"
    ],
    datasets: [{
      label: "Negative Impact on SEO (Score 1-10)",
      data: [8,7,6,5,7]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: { beginAtZero: true }
    },
    plugins: {
      legend: { display: true }
    }
  }
});