JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <div id="chart"></div>    

    <div id="container">
	    <table id="mytable" class="table-striped table table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Type</th>
                <th>Year</th>
                <th>Title</th>
            </tr>
        </thead>
    </table>

JavaScript

$(document).ready(function() {

  let draw = false;

  var url = "https://api.myjson.com/bins/ffprt";

  var table = $('#mytable').DataTable( {
    "ajax": {
      "url": url,
      "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){
        return_data.push({
          'date' : json[i]["issued"]["date-parts"]["0"]["0"],
          'type' : json[i]["type"],
          'title': json[i]["title"]
        })
      }
      return return_data;
    }
  },
    "pageLength": 50,
    "processing": true,
    "dom": "<'row'<'col-sm-12'i f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'><'col-sm-7'p>>",
    "columns": [
    	{"data":"type"},
    	{"data":"date"},
    	{"data":"title"}      
    ],        
       "initComplete": function getdata (settings, json) {
      
    var data = table.rows().data();

    var categories=[]; //creating array for storing browser type in array.
        for(var i=0;i<data.length;i++){
        categories.push(data[i].type)
    }

    var years=[]; //creating array for storing browser type in array.
        for(var i=0;i<data.length;i++){
        years.push(data[i].date)	
    }


      var count = {}; //creating object for getting categories with count
          categories.forEach(function(i) {
          count[i] = (count[i]||0)+1;  
      });

      console.log(count) 
      
      var countyears = {}; //creating object for getting categories with count
          years.forEach(function(i) {
          countyears[i] = (countyears[i]||0)+1;  
      });

      console.log(countyears)       

      var nroftype=[]; //creating empty array for highcharts series data
      var type=[];
      var nrofyear=[];
      var year=[];//creating empty array for highcharts categories
      
      Object.keys(count).map(function(item, key) {
          nroftype.push(count[item])
          type.push(item)
          });

			Object.keys(countyears).map(function(item, key) {
         ...