JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>

JavaScript

function createChart() {
            var rawdata = [{
                "Serie": "S1",
                "Segmento": "C1",
                "Valor1": 0.31500380634422465,
                "Tooltip": 20,
                },
                {
                "Serie": "S1",
                "Segmento": "C2",
                "Valor1": 0.7762654833935329,
                "Tooltip": 23,
                },
                {
                "Serie": "S1",
                "Segmento": "C3",
                "Valor1": 0.012805224641799784,
                "Tooltip": 15,
                },
                {
                "Serie": "S2",
                "Segmento": "C1",
                "Valor1": 0.1643491679040616,
                "Tooltip": 20,
                },
                {
                "Serie": "S2",
                "Segmento": "C2",
                "Valor1": 0.1455426303750829,
                "Tooltip": 23,
                },
                {
                "Serie": "S2",
                "Segmento": "C3",
                "Valor1": 0.85715821761256,
                "Tooltip": 15,
                },
                {
                "Serie": "S3",
                "Segmento": "C1",
                "Valor1": 0.2556441107853063,
                "Tooltip": 20,
                },
                {
                "Serie": "S3",
                "Segmento": "C2",
                "Valor1": 0.06216988823634783,
                "Tooltip": 23,
                },
                {
                "Serie": "S3",
                "Segmento": "C3",
                "Valor1": 0.0715261203244208,
                "Tooltip": 15,
                },
                {
                "Serie": "S4",
                "Segmento": "C1",
                "Valor1": 0.2650029149664075,
                "Tooltip": 20,
                },
                {
                "Serie": "S4",
                "Segmento": "C2",
                "Valor1": 0.016021997995036452,
                "Tooltip": 23,
       ...