JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="http://bkuzmic.github.com/raphael-charts-plugin/raphael-1.5.2-min.js"></script>
<script src="http://bkuzmic.github.com/raphael-charts-plugin/raphael-charts-min.js"></script>
<input type="range" class="areas" min="0" max="2000000" value="20" />
<input type="range" class="areas" min="0" max="2000000" value="10" />
<input type="range" class="areas" min="0" max="2000000" value="20" />
<input type="range" class="areas" min="0" max="2000000" value="40" />
<input type="range" class="areas" min="0" max="2000000" value="10" />

<div id="canvas5" class="canvas5"></div>

JavaScript

$(document).ready(function() {
    var canvasX = 320;
    var canvasY = 240;            

    var startTime = new Date().getTime();   
    
    var pieColors = [
        "green",
        "yellow",
        "purple",
        "orange",
        "blue"
    ]

    var paper5 = Raphael("canvas5", canvasX, canvasY);    
    
    paper5.charts.pie(canvasX, canvasY, 100, 100, [20,10,20,40,10],
                      {colors: pieColors , 
                       size3d: 10, 
                       animation: false,
                       tooltip: false, 
                       show3d: true,
                       //labels: ["Slice 1", "Slice 2", "Slice 3"],
                       //backgroundFill: ["#ccc", "#333"], 
                       showLegend: false});
});