JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="chart" style="display: block; height:200px; width:200px"></canvas>

JavaScript

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
	type: 'horizontalBar',
  data: {
    labels: [
      'labelKeeper', 
      'labelDefense', 
      'labelCondition', 
      'labelFitness',
      'labelMotivation',
      'labelPassing',
      'labelStandards',
      'labelShooting',
      'labelBuildUpPlay',
      'labelWing',
      'labelExperience',
      'labelRecovery'
    ],
    datasets: [{
      label: '',
      data: [
        13, 
        43, 
        12, 
        32,
        23, 
        24, 
        13, 
        9,
        32, 
        17, 
        27, 
        23,
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1,
    }]
  },
  options: {
    //aspectRatio: 2,
    legend: {
      display: false,
    },
    scales: {
      xAxes : [{
        ticks : {
          max : 30,    
          min : 0
        },

      }],
      yAxes : [{
      	barPercentage: 1,
      	categoryPercentage: 1
      }]
    },
  },
  plugins: {
    datalabels: {

    }
  }
});