JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    var dataRaw = [
      {
        "id": 24,
        "title": "BCOM",
        "description": "mcom",
        "DIFF": 120
      },
      {
        "id": 26,
        "title": "MCOM",
        "description": "mcom",
        "DIFF": 240
      },
      {
        "id": 29,
        "title": "MCOM",
        "description": "mcom",
        "DIFF": 480
      },
      {
        "id": 30,
        "title": "MCOM",
        "description": "mcom",
        "DIFF": 240
      }
    ];
    
    var data = [],
        len = dataRaw.length,
        i;
    
    for(i = 0; i<len;i++){
        data.push({
            name: dataRaw[i].title,
            y: dataRaw[i].DIFF
        })
    }
    
    $('#container').highcharts({
        chart: {
            type:'pie'
        },
        title: {
        text: 'testing'
    },
        series: [{
            data:data
        }]
    });
});