JSFiddle - React, Tailwind, and code Playground

by safarov

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="pie" style="height: 400px; width: 500"></div>

JavaScript

var categories = ['Facebook', 'StumbleUpon', 'Twitter', 'Delicious', 'Mail.RU', 'Pinterest'],
        name = ' ',
        data = [{
            "y": 97.56,
            "color": "rgb(59,89,151)",
            "drilldown": {
                "name": "Facebook",
                "categories": ["shares", "likes", "comments"],
                "data": [58.01, 25.47, 14.08],
                "color": ["rgb(45,75,137)", "rgb(31,61,123)", "rgb(17,47,109)"]
            }
        }, {
            "y": 1.93,
            "color": "rgb(235,73,36)",
            "drilldown": {
                "name": "StumbleUpon",
                "categories": ["views"],
                "data": [1.93],
                "color": ["rgb(221,59,22)"]
            }
        }, {
            "y": 0.35,
            "color": "rgb(0,172,237)",
            "drilldown": {
                "name": "Twitter",
                "categories": ["tweets"],
                "data": [0.35],
                "color": ["rgb(0,158,223)"]
            }
        }, {
            "y": 0.1,
            "color": "rgb(221,221,221)",
            "drilldown": {
                "name": "Delicious",
                "categories": ["posts"],
                "data": [0.1],
                "color": ["rgb(207,207,207)"]
            }
        }, {
            "y": 0.04,
            "color": "rgb(3,74,136)",
            "drilldown": {
                "name": "Mail.RU",
                "categories": ["shares", "clicks"],
                "data": [0.03, 0.01],
                "color": ["rgb(-11,60,122)", "rgb(-25,46,108)"]
            }
        }, {
            "y": 0.01,
            "color": "rgb(104,33,39)",
            "drilldown": {
                "name": "Pinterest",
                "categories": ["pins"],
                "data": [0.01],
                "color": ["rgb(90,19,25)"]
            }
        }];


    // Build the data arrays
    var nt_PieData = [];
    var nt_ActionData = [];
    for (var i = 0; i < data.length; i++) {

       ...