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

by seosharelink

HTML

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

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

CSS

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

JavaScript

document.addEventListener("DOMContentLoaded", function () {

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

  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,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

});