JSFiddle - React, Tailwind, and code Playground

by giorgitbs

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<div id="chartdiv" style="height:300px;width:400px;"></div>

JavaScript

$(document).ready(function () {
    var data = [
        ['Heavy Industry', 12],
        ['Retail', 9],
        ['Light Industry', 14],
        ['Out of home', 16],
        ['Commuting', 7],
        ['Orientation', 9]
    ];
    var plot2 = jQuery.jqplot('chartdiv', [data], {
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Turn off filling of slices.
                fill: false,
                showDataLabels: true,
                // Add a margin to seperate the slices.
                sliceMargin: 4,
                // stroke the slices with a little thicker line.
                lineWidth: 5
            }
        },
        seriesColors: ["#FF0000", "#0000FF", "#00FF00", "#FF00FF", "#FFA500", "#FFFF00"],
        legend: {
        // This renderer is needed for advance legends.
        renderer: jQuery.jqplot.EnhancedLegendRenderer,
        show: true, 
        location: 's', 
        placement: 'outside',
        // Breaks the ledgend into horizontal.
        rendererOptions: {
          numberRows: '2',
          numberColumns: '3'
        },
        seriesToggle: true
      },    
    });
});