JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pieRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.highlighter.js"></script>
<div id="chart1" style="height:250px; width:596px;"></div>

JavaScript

var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
var ticks = ['May', 'June', 'July', 'August'];
var options = {
    seriesDefaults: {
        seriesColors: ['#00809d', '#c22a33'],
        renderer: $.jqplot.PieRenderer,
        rendererOptions: {
            showDataLabels: true,
            //Try to comment this line to correct your visual trouble
            //dataLabels: 'label',
            dataLabelPositionFactor: .45,
            sliceMargin: 1,
            drawBorder: false,
            startAngle: -90,
            highlightMouseOver: true
        },
        shadow: false
    },  
    highlighter: {
        show: true,
        showTooltip: true,
        formatString:'%s',
        tooltipLocation: 'ne',
        useAxesFormatters: false
    },
    legend: { show:false },
    grid: {
        drawGridlines: false,  
        borderColor: 'transparent',
        shadow: false,
        drawBorder: false,
        shadowColor: 'transparent',
        background: 'transparent'
    }
};
var plot1 = $.jqplot('chart1', [data], options);