JSFiddle - React, Tailwind, and code Playground

HTML

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script> 
 <canvas id="theChart" style="width:100%;max-width:700px"></canvas>

JavaScript

const mbtiData = [
	['ISTJ', 22199],
  ['ISFJ', 20934],
  ['INFJ', 176814],
  ['INTJ', 168897],
  ['ISTP', 37913],
  ['ISFP', 27172],
  ['INFP', 223798],
  ['INTP', 191210],
  ['ESTP', 10841],
  ['ESFP', 9603],
  ['ENFP', 101987],
  ['ENTP', 78264],
  ['ESTJ', 5872],
  ['ESFJ', 8032],
  ['ENFJ', 35170],
  ['ENTJ', 37378],
];

const mbtiLabels = mbtiData.map(a => a[0]);
const mbtiValues = mbtiData.map(a => a[1]);
const mbtiColors = mbtiData.map(a => 'gray');

const theChart = new Chart("theChart", {
  type: "bar",
  data: {
  	labels: mbtiLabels,
    datasets: [{
    	data: mbtiValues,
      backgroundColor: mbtiColors,
    }],
  },
  options: {
  	legend: {
    	display:false
    },
    title:{
    	display: true,
      text: "MBTI Subreddit Subscriber Count 2/13/2024"
    },
  }
});