function mostrarContrasena(idCampo) {
    var x = document.getElementById(idCampo);
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

// Función para destruir un gráfico si ya existe
function destruirGraficoExistente(chartInstance) {
    if (chartInstance) {
        chartInstance.destroy();
    }
}

var porcentajesChart;

function generarGraficoBarras(chartId, labels, data, colors) {

    var ctx = document.getElementById(chartId).getContext('2d');
    ctx.canvas.height = 200; // Altura en pixels
    ctx.canvas.width = 300; // Ancho en pixels

    if (porcentajesChart) {
        porcentajesChart.destroy();
    }

    var chartData = {
        labels: labels,
        datasets: [{
            barPercentage: 0.6,
            label: 'Porcentaje de Cumplimiento',
            data: data,
            backgroundColor: colors,
            borderColor: colors.map(color => color.replace('0.2', '1')), // Cambia la opacidad a 1 para los bordes
            borderWidth: 1
        }]
    };

    var chartOptions = {
        scales: {
            y: {
                beginAtZero: true,
                max: 100,
                grid: {
                    display: false, // No muestra las líneas de la cuadrícula
                    drawBorder: false // No dibuja el borde del eje
                }
            },
            x: {
                grid: {
                    display: false, // No muestra las líneas de la cuadrícula
                    drawBorder: false // No dibuja el borde del eje
                }
            }

        },
        layout: {
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10
            }
        },
        elements: {
            bar: {
                borderWidth: 2, // Ancho del borde de las barras
                //borderRadius: 10 // Radio de esquinas de las barras
            }
        },

        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false // No muestra la leyenda
            }
        }


    };

    porcentajesChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: chartOptions
    });
}