JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chart" style="width: 500px; height: 500px;"></div>
JavaScript
define(['dojo/_base/declare',
'dojo/_base/connect',
'dojox/charting/Chart',
'dojox/charting/plot2d/Spider'], function(declare, connect) {
var MySpider = declare("dojox.charting.plot2d.MySpider", [dojox.charting.plot2d.Spider], {
animDuration: 5,
_createSeriesEntry: function(ts, osps, sps, f, sk, r, ro, ms, at) {
var widget = this;
//polygon
var spoly = ts.createPolyline(osps).setFill(f).setStroke(sk),
scircle = [];
for (var j = 0; j < osps.length; j++) {
var point = osps[j],
cr = ms;
var circle = ts.createCircle({
cx: point.x,
cy: point.y,
r: cr
}).setFill(f).setStroke(sk);
scircle.push(circle);
}
var anims = dojo.map(sps, function(np, j) {
// create animation
var sp = osps[j],
anim = new dojo._Animation({
duration: widget.animDuration,
easing: at,
curve: [sp.y, np.y]
});
var spl = spoly,
sc = scircle[j];
connect.connect(anim, "onAnimate", function(y) {
//apply poly
var pshape = spl.getShape();
pshape.points[j].y = y;
spl.setShape(pshape);
//apply circle
var cshape = sc.getShape();
cshape.cy = y;
sc.setShape(cshape);
});
return anim;
});
var anims1 = dojo.map(sps, function(np, j) {
// create animation
var sp = osps[j],
anim = new dojo._Animation({
duration: widget.animDuration,
...