Gráfico

<title>Budget Distribution</title>
    


    <div id="pie-chart" style="width:100%;max-width:900px;margin:0 auto"></div>

    
        // Data
        var values = [
            2158639, 501000, 35447.01, 304681.86, 149992.45, 87957.44, 511545.71, 
            112345.64, 679125.7, 1118778.6, 6019973.2, 3430695.82, 34350, 2804260.72, 
            367365.13, 1963940, 506361.07, 471000, 40051742.46, 517852.85, 1304631.61, 
            644000, 2427214.26, 5632816.27, 1133131.65, 69335.64, 187985.78, 31003.8, 
            341944.15, 6038827.31, 3160574.3, 195000, 261137.8, 94000, 45700, 
            5708527.72, 305800, 174061.87, 425424.49, 945669.78, 228635.45, 2915000, 
            20242, 2896628.67, 932238.79, 408866.42, 483415.85, 752795.32, 37536, 3301375.33
        ];
        
        var labels = [
            "Alumbrado Público", "Amortización de la Deuda", "Arrendamiento Fotocopiadoras", 
            "Arrendamiento Material Transporte", "Cementerio", "Combustibles y Carburantes", 
            "Comunicación Social", "Comunicaciones Telefónicas", "Conserjes, Correos y Archivo", 
            "Cultura", "Deporte", "Educación", "Empleo", "Energía Electrica", "Escuela de Música", 
            "Festejos", "Fondo de Contingencia", "Gastos Financieros", "Gastos Personal", 
            "Igualdad", "Informática", "Juventud e Infancia", "Limpieza de Edificios", 
            "Limpieza Viaria", "Mantenimiento, Conservación y Obras Públicas", "Material de Oficina", 
            "Mercadillo, Comercio, Desarrollo Local y OMIC", "Movilidad", "Organos de Gobierno y Adm. General", 
            "Parques y Jardines", "Participación Ciudadana", "Patrimonio", "Personas Mayores", 
            "Planificación y Agenda Urbana", "Protección Civil", "Recogida de Residuos", "RR.HH", 
            "SAC", "Salud y Discapacidad", "Seguridad Ciudadana", "Seguros", 
            "Sevicio de Extinción de Incendios", "Servicios Económicos y Contratación", 
            "Servicios Sociales", "Suministro Agua", "Suministro Gas", "Transportes", 
            "Urbanismo y Medio Ambiente", "Vestuario", "Vías Públicas"
        ];

        // Calculate percentages
        var total = values.reduce((sum, value) =&gt; sum + value, 0);
        var percentages = values.map(value =&gt; (value / total) * 100);

        // Combine labels, values, and percentages for sorting
        var combined = labels.map((label, index) =&gt; ({
            label: label,
            value: values[index],
            percentage: percentages[index]
        }));

        // Sort combined data by percentage in descending order
        combined.sort((a, b) =&gt; b.percentage - a.percentage);

        // Separate sorted data back into labels and values
        var sortedLabels = combined.map(item =&gt; item.label);
        var sortedValues = combined.map(item =&gt; item.value);
        var sortedPercentages = combined.map(item =&gt; item.percentage);

        // Create hover text and legend text
        var hoverText = sortedLabels.map((label, index) =&gt; `${label}: ${sortedValues[index].toFixed(2)} € (${sortedPercentages[index].toFixed(2)}%)`);
        var legendText = sortedLabels.map((label, index) =&gt; `${label} (${sortedPercentages[index].toFixed(2)}%)`);

        var data = [{
            values: sortedValues,
            labels: legendText,
            type: 'pie',
            textinfo: 'label',
            hoverinfo: 'text',
            text: sortedLabels,
            hovertext: hoverText
        }];

        var layout = {
            height: 600,
            width: 900,
            showlegend: true,
            legend: {
                x: 1,
                y: 1,
                traceorder: 'normal',
                font: {
                    family: 'sans-serif',
                    size: 12,
                    color: '#000'
                },
                bgcolor: '#E2E2E2',
                bordercolor: '#FFFFFF',
                borderwidth: 2
            }
        };

        Plotly.newPlot('pie-chart', data, layout);