radarD3plus

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3plus@2"></script>
    <div id="chart" style="height:500px;">

    </div>

JavaScript

// Datos de ejemplo
const data = [
    {
        "id": "alpha",
        "axis": "Central",
        "number": 17
    },
    {
        "id": "alpha",
        "axis": "Kirkdale",
        "number": 40
    },
    {
        "id": "alpha",
        "axis": "Kensington",
        "number": 24
    },
    {
        "id": "alpha",
        "axis": "Everton",
        "number": 90
    },
    {
        "id": "alpha",
        "axis": "Picton",
        "number": 80
    },
    {
        "id": "alpha",
        "axis": "Riverside",
        "number": 30
    }
    
    
];
   

new d3plus.Radar()

    .config({
        data: data,
        groupBy: "id", // Agrupación para las líneas del radar
        value: "number", // Valores para las métricas
        metric: "axis",
        
        axisConfig: {
            ticks: [0, 20, 40, 60, 80, 100], // Valores específicos de los ticks
            tickSize: 5, // Tamaño de los ticks
            tickPadding: 10 // Espaciado entre los ticks y las etiquetas
            
            , gridConfig: {
                stroke: "blue", // Color de las líneas de la cuadrícula
                strokeWidth: 3 // Grosor de las líneas de la cuadrícula
            },
            shapeConfig: {
                fill: "none",
                labelConfig: {
                    fontColor: "green",
                    padding: 0,
                   verticalAlign: "middle"
                },
                stroke: "#eee",
                strokeWidth: 1
            }
        },
        legend: false, // Habilitar la leyenda
        
    })
    .select("#chart")
    .render();