JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="ffbenchChart" width="200" height="100%"></canvas>

JavaScript

var ctx = document.getElementById('ffbenchChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["FF14紅蓮ベンチ", "FF14漆黒ベンチ", "FF15ベンチ"],
    datasets: [{
      label: 'Ryzen5 3600 + GTX1660Ti',
      data: [12580, 12508, 6860],
      backgroundColor: 'rgba(255, 0, 0, 0.6)',
      borderWidth: 0
    }, {
      label: 'Ryzen7 2700x + GTX660Ti',
      data: [6510, 6928, 1909],
      backgroundColor: 'rgba(255, 102, 0, 0.6)',
      borderWidth: 0
    }, {
      label: 'Core i7-4770 + GTX660',
      data: [5856, 6103, 1862],
      backgroundColor: 'rgba(0, 0, 255, 0.6)',
      borderWidth: 0
    }]
  },
  options: {
    title: {
      display: true,
      position: 'top',
      text: 'ファイナルファンタジーベンチマーク'
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 14000,
        }
      }]
    },
  }
});