Display a bar chart comparing average monthly costs of SEO tools.

by seosharelink

HTML

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

<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="seoToolChart"></canvas>
  </div>
</section>

JavaScript

window.addEventListener('load', function() {
  const ctx = document.getElementById('seoToolChart').getContext('2d');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [
        'Manual Coding',
        'SEO Plugins',
        'Online Generators',
        'SEO Platforms'
      ],
      datasets: [{
        label: 'Average Monthly Cost ($)',
        data: [0, 25, 0, 200]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: true }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
});