JSFiddle - React, Tailwind, and code Playground

Proof of concept

by ernestohs

HTML

<table>
            <tbody>
                <tr>
                    <th scope="row">A</th>
                    <td>80</td>
                </tr>
                <tr>
                    <th scope="row">D</th>
                    <td>60</td>
                </tr>
                <tr>
                    <th scope="row">K</th>
                    <td>70</td>
                </tr>
                <tr>
                    <th scope="row">A</th>
                    <td>0</td>
                </tr>
                <tr>
                    <th scope="row">R</th>
                    <td>0</td>
                </tr>
            </tbody>
        </table>

JavaScript

Raphael.fn.spiderChart = function(cx, cy, r, values, labels) {
    ///@param {cx} 
    ///@param {cy} 
    ///@param {r} 
    ///@param {values} 
    ///@param {labels} 
    ///@return {chart} The final chart
    var paper = this,
        chart = this.set();

    //  Step 1: we draw the wireframe
    var wireframe = [0, 0, 1076.3, 552.4,
    {
        type: 'path',
        path: 'M 1051.3 525.8 L 2.8 525.8 L 106.5 203.6 L 365.9 1.6 L 690.8 1.6 L 950.3 202.5Z',
        'fill': '#ededed',
        'stroke': 'none',
        'stroke-width': '0',
        'fill-opacity': '1',
        'stroke-opacity': '0'},
    {
        type: 'path',
        path: 'M 1050.5 526.7 L 2 526.7 L 105.8 204.5 L 365.1 2.4 L 690.1 2.4 L 949.5 203.4Z',
        'fill': 'none',
        'stroke': '#000000',
        'stroke-width': '3',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-miterlimit': '4',
        'fill-opacity': '1',
        'stroke-opacity': '1'},
    {
        type: 'path',
        path: 'M 948.5 526.7 L 105.8 526.7 L 189.2 267.7 L 397.6 105.3 L 658.8 105.3 L 867.3 266.9Z',
        'fill': 'none',
        'stroke': '#000000',
        'stroke-width': '3',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-miterlimit': '4',
        'fill-opacity': '1',
        'stroke-opacity': '1'},
    {
        type: 'path',
        path: 'M 840.6 526.7 L 212.7 526.7 L 274.9 336 L 430.2 216.3 L 624.8 216.3 L 780.1 335.3Z',
        'fill': 'none',
        'stroke': '#000000',
        'stroke-width': '3',
        'stroke-linecap': 'round',
        'stroke-linejoin': 'round',
        'stroke-miterlimit': '4',
        'fill-opacity': '1',
        'stroke-opacity': '1'},
    {
        type: 'path',
        path: 'M 729.4 526.7 L 321.6 526.7 L 362 397.9 L 462.8 317.1 L 589.2 317.1 L 690.1 397.5Z',
        'fill': 'none',
        'stroke': '#000000',
        'stroke-width': '3',
        'stroke-linecap': 'round',
       ...