JSFiddle - React, Tailwind, and code Playground

by seosharelink

HTML

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

<section class="chart-box">
  <canvas id="metaChart"></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;
  margin:auto;
  height: 300px;
}

JavaScript

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

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [
      "Meta Title Importance",
      "Meta Description Influence",
      "Content Quality",
      "Backlinks"
    ],
    datasets: [{
      label: "Impact on SEO Performance (Score 1-10)",
      data: [9, 6, 10, 9]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: { beginAtZero: true }
    },
    plugins: {
      legend: { display: true }
    }
  }
});