JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='chartDiv'></div>

JavaScript

// Dataparse is called when the data is ready for the chart
zingchart.dataparse = function (p, d) {
    console.log(d);

    // Get number of series in graphset, initialize array of 0s
    var seriesLength = d.graphset.length;
    var total = new Array(seriesLength);
    while (seriesLength--) total[seriesLength] = 0;

    // Calculate the sum of the values in each series (each pie)
    for (var n = 0; n < d.graphset.length; n++) {
        for (var m = 0; m < d.graphset[n].series.length; m++) {
            total[n] += d.graphset[n].series[m].values[0];
        }
    }

    // Find the largest value in the array of totals
    var largest = Math.max.apply(Math, total);
    // Calculate % modifier based off of largest value for each pie chart
    for (var n = 0; n < d.graphset.length; n++) {
        var sizeModifier = (total[n] / largest) * 100;
        // Apply the size modifier to each slice of each pie chart.
        for (var m = 0; m < d.graphset[n].series.length; m++) {
            d.graphset[n].series[m].size = sizeModifier + '%';
        }
    }

    // Return modified chart object to be rendered.
    return d;
}

var oData = {
    "layout": "h",
        "graphset": [{
        "type": "pie",
            "plotarea": {
            "margin": "0 40"
        },
            "plot": {
            "value-box": {
                'visible': 1,
                "text":"%v"
            }
        },
            "series": [{
            "values": [169]
        }, {
            "values": [151]
        }, {
            "values": [142]
        }, {
            "values": [125]
        }]
    }, {
        "type": "pie",
            "plotarea": {
            "margin": "0 40"
        },
            "scaleX": {

        },
            "scaleY": {

        },
            "plot": {
            "value-box": {
                'visible': 1,
                "text":"%v"
            }
        },
            "series": [{
            "values": [120]
        }, {
            "values": [89]
  ...