https://www.loom.com/share/506e2860352344c1851f22e257329153?sid=2b426d6b-f666-49ec-bd1b-f90220a46813

Código no componente de JavaScript :

window.top.postMessage({ event: "eventoPaginaGrafico",
    detail: {
        labels: ['Categoria 1', 'Categoria 2', 'Categoria 3', 'Categoria 4', 'Categoria 5'],
        valores: ['{{{valor_1}}}', '{{{valor_2}}}', '{{{valor_3}}}', '{{{valor_4}}}', '{{{valor_5}}}'],
        title: "Quiz do conhecimento"
    }
}, '*');

Merlin.setVariable("html",`<div id="div-radar"><canvas id="meuChart"></canvas></div>`);

Código na aba de Customize o CSS:

#div-radar{
    width: 100%;
    height: 400px;
	display: flex;
  	justify-content: center;
}

#meuRadarChart{
	height: 400px !important;
}

Código na aba Adicione um código javascript:

<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {

    var globalChart = null;
    var eventData = null;

    function criarOuAtualizarGrafico(canvas, dados) {
        var ctx = canvas.getContext('2d');
        if (globalChart) {
            globalChart.destroy();
        }
              globalChart = new Chart(ctx, {
            type: 'line', // Alterado para 'line'
            data: {
                labels: dados.labels,
                datasets: [{
                    label: dados.title || 'Dados da Linha', // Usa o título do evento ou um padrão
                    data: dados.valores,
                    fill: false, // Removido o preenchimento
                    borderColor: '#5c40f5',
                    tension: 0.1 // Ajuste a tensão da linha para suavizar (opcional)
                }]
            },
            options: {
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Eixo X'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Eixo Y'
                        }
                    }
                },
                elements: {
                    line: {
                        borderWidth: 3
                    }
                }
            }
        });
    }
  
  	window.addEventListener('message', function(event) {
      if (event.data.event === "eventoPaginaGrafico") {
        eventData = event.data.detail;

        verificarEAtualizarGrafico();
  	  }
	});

    function verificarEAtualizarGrafico() {
        var canvas = document.getElementById('div-radar');

        if (canvas && eventData) {
          	let canva = document.createElement('canvas');
          	canva.id = "meuChart";
          	canvas.appendChild(canva);
            criarOuAtualizarGrafico(canva, eventData);
            eventData = null;
        }
    }

    const observer = new MutationObserver(() => {
        verificarEAtualizarGrafico();
    });

    observer.observe(document.body, { childList: true, subtree: true });
});
</script>

Documentação do chartjs