JSFiddle - React, Tailwind, and code Playground

by NishitDhakar

HTML

<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.css">
<div id="chartdiv"></div>

JavaScript

var data = [
     ['Heavy Industry', 789546123],
     ['Retail', 325641789],
     ['Light Industry', 452136987],
     ['Out of home', 325614789],
     ['Commuting', 859632147],
     ['Orientation', 159326847]
 ];

 $('#chartdiv').width('480px').height('320px');
 plot1 = jQuery.jqplot('chartdiv', [data], {
     seriesDefaults: {
         // Make this a pie chart.
         renderer: jQuery.jqplot.PieRenderer,
         rendererOptions: {
             // Put data labels on the pie slices.
             // By default, labels show the percentage of the slice.
             showDataLabels: true,
             startAngle: 180, 
              sliceMargin: 4, 
             dataLabels: 'value',
             dataLabelFormatString: '$ %d'
         }
     },
     
     //Change Color Per Slice
     seriesColors: ['rgb(54,96,146)', 'rgb(150,54,52)', 'rgb(118,147,60)', 'rgb(96,73,122)', 'rgb(49,134,155)', 'rgb(226,107,10)'],
     highlightColors: ['rgb(54,96,146)', 'rgb(150,54,52)', 'rgb(118,147,60)', 'rgb(96,73,122)', 'rgb(49,134,155)', 'rgb(226,107,10)'],
     highlighter: {
         show: true,
         tooltipLocation: 'sw',
         useAxesFormatters: false,
         tooltipAxes: 'x',
         fadeTooltip: true,
         tooltipFadeSpeed: "fast",
         tooltipFormatString: '<b><span style="color:black;fontFamily: Calibri;fontSize: 14px;background-color:rgb(242,242,242);"> %s </span></b>'

     },
     legend: {
         show: true,
         location: 'e'
     }
 });

 previousPoint = null;
 $('#chartdiv').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) {
     var labels = $('#chartdiv .jqplot-data-label');
     if (previousPoint != null) {
         labels[previousPoint['idx']].innerHTML = previousPoint['data'][1] + '';
     }
     labels[pointIndex].innerHTML = data[0] + ": " + data[1];
     previousPoint = {
         'idx': pointIndex,
         'data': data
     };
 });