[Chartjs]-Chart.js inside popup on leaflet?

Change your javascript to following:

$.getJSON('data.geo.json', function (geojson) {
  L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
      return L.marker(latlng);
    },
    onEachFeature: function (feature, layer) {
      const coordinates = feature.geometry.coordinates;
      const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});

      console.log( `Coordinates:     ${coordinates}`);
      console.log( `Coordinates N:   ${normalizedCoordinates}`);

      const content =
      `
      <p id="heading">${feature.properties.name}</p>
      <p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
      <p class="scoreB"><strong>ScoreB: </strong><span>${feature.properties.scoreB}</span></p>
      <p class="scoreC"><strong>ScoreC: </strong><span>${feature.properties.scoreC}</span></p>
      <p class="scoreD"><strong>ScoreD: </strong><span>${feature.properties.scoreD}</span></p>

      <div class="popup__chart">chart</div>
      `;
      layer.on('click', function (e) {

        var popupElm = document.getElementById("popup__content");
        popupElm.innerHTML = content;
        $(".popup").fadeOut(10);
        $(".popup").fadeIn("slow");

        console.log( `Click on ${feature.properties.name}`);
        const maxZoom = mymap.getMaxZoom();
        console.log(maxZoom)
        mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});


        var marksData = {
          labels: ["Score A", "Score B", "Score C", "Score D"],
          datasets: [{
            label: "City",
            backgroundColor: "rgba(200,0,0,1)",
            data: [
              popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
              popupElm.querySelectorAll('.scoreB span')[0].innerHTML,
              popupElm.querySelectorAll('.scoreC span')[0].innerHTML,
              popupElm.querySelectorAll('.scoreD span')[0].innerHTML
              ],
          },]
        };
        if(radarChart){
          radarChart.destroy();
        }
        radarChart = new Chart(marksCanvas, {
          type: 'radar',
          data: marksData
        });
      });


    }
  }).addTo(mymap);
});

//Chart
var marksCanvas = document.getElementById("marksChart");
var radarChart = null;


$(document).ready(function(){
  $(".popup__bar__close").click(function(){
    $('.popup').css('display', 'none');
    mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
  });
});

What changed:

1. Add in the Popup around the score value a span, so it can easily read out

   <p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>

2. Move the chart generation into the click function but keep the global variables

3. Destroy the existing chart, else an error is thrown radarChart.destroy();

4. Get the valus from popup and use it in the data array. It searches for the class .scoreA and then it get the child span element

   popupElm.querySelectorAll('.scoreA span')[0].innerHTML,

Btw. you can also get the values from the clicked layer:

data: [
              layer.feature.properties.scoreA,
              layer.feature.properties.scoreB,
              layer.feature.properties.scoreC,
              layer.feature.properties.scoreD,
            ]