JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
	<div style="height: 300px;">
		<canvas id="canvas"></canvas>
	</div>

JavaScript

// Note: doing out of order to show sorting is working
function getData() {
	const data = [];

  const val4 = [];
  val4['faculty'] = 'Masscom';
  val4['category'] = 'Webex';
  val4['counter'] = 3;
  data.push(val4);

  const val1 = [];
  val1['faculty'] = 'Information Technology';
  val1['category'] = 'ELearning';
  val1['counter'] = 2;
  data.push(val1);

  const val2 = [];
  val2['faculty'] = 'Information Technology';
  val2['category'] = 'Webex';
  val2['counter'] = 2;
  data.push(val2);

  const val3 = [];
  val3['faculty'] = 'Masscom';
  val3['category'] = 'ELearning';
  val3['counter'] = 3;
  data.push(val3);

  return data;
}

const data = getData();

// this will get distinct faculty and sort
const faculties = [...new Set(data.map(v => v['faculty']))].sort();

// this will get distinct category and sort
const categories = [...new Set(data.map(v => v['category']))].sort();

const datasets = categories.map(category => ({
  label: category,
  data: faculties.map(faculty => {
    const value = data.find(v => v['faculty'] === faculty && v['category'] === category);

    return value['counter'];
  })
}));

const canvas = document.getElementById('canvas');

new Chart(canvas, {
  type: 'bar',
  data: {
    labels: faculties,
    datasets: datasets
  },
  options: {
    scales: {
      yAxes: [{
      	ticks: { min: 0 }
      }]
    }
  }
});