Chartjs-Chart JS Not Displaying Chart

The problem you are having is the order in which you call your functions. Move the selector of the chart element inside the calc function, but after the part where you set the innerHTML. This is because the HTML has to be updated first with the new element, and then you should select the element and initialize the canvas.

const calculate = document.getElementById("one");
const resultsContainer = document.querySelector(".card-wrapper-results");
let surveyResults = [
  {
    savings: 10.23,
    price: 35.84,
  },
];

calculate.addEventListener("click", calc);

function calc(event) {
  event.preventDefault();

  // Do the calculations.
  let gas = parseFloat(document.getElementById("gas").value);
  let price = parseFloat(document.getElementById("price").value);
  let gasSaving;
  let smartSaving;
  let result;
  let totalSaving;
  smartSaving = gas * 0.2;
  gasSaving = gas * 0.3;
  totalSaving = smartSaving + gasSaving;
  surveyResults[0].savings = totalSaving;

  result = price - totalSaving;

  // Generate HTML to show the chart in.
  let displayResults = surveyResults.map((item) => `
    <div class="card2-results">
      <h1>Scrappage Payment</h1>
      <p class="job-title">Vaillant EcoTech Plus</p>
      <h2 class="about-h2">£507.23</h2>
      <ul class="about-payment">
      <li><i class="fas fa-check"></i> AAA+ Rated Vaillant Ecotech Plus</li>
      <li><i class="fas fa-check"></i> 10 Year Guaranty</li>
      <li><i class="fas fa-check"></i> Big Gas Bill Savings</li>
      <li><i class="fas fa-check"></i> Which Boiler Of The Year</li>
      </ul>
    
      <a href="" class="btn-results">30% Lower Gas Bill</a>
    </div>
    
    <div class="card2-results">
      <h1>Monthly Gas Savings</h1>
      <p class="job-title">Instant Savings</p>
      <h2 class="about-h2">£${item.savings.toFixed(2)}</h2>
      <ul class="about-payment">
      <li><i class="fas fa-check"></i> Start Saving Straightaway</li>
      <li><i class="fas fa-check"></i> 30% Saving From EcoTech Plus</li>
      <li><i class="fas fa-check"></i> 18% Saving From Hive Smart Heating</li>
      <li><i class="fas fa-check"></i> Hive Smart Heating System Included</li>
      </ul>
    
      <a href="" class="btn-results">1st Year £336</a>
    </div>
    
    <div class="card3">
      <h1>Yearly Gas Savings</h1>
      <p class="job-title">Gen 3 Smart Heating</p>
      <canvas id="myChart"></canvas>
    </div>
  `);

  // Canvas element exists after this line.
  resultsContainer.innerHTML = displayResults;

  // Now the myChart element is in the DOM, select it.
  let myChart = document.getElementById("myChart").getContext("2d");

  // Create a new chart.
  let chartResults = new Chart(myChart, {
    type: "bar",
    data: {
      labels: [
        "Year 1",
        "Year 2",
        "Year 3",
        "Year 4",
        "Year 5",
        "Year 6",
        "Year 8",
        "Year 9",
        "Year 10",
      ],
      datasets: [
        {
          label: "Savings Per Year £",
          data: [342, 410, 443, 501, 557, 602, 673, 702, 764, 823],
        },
      ],
    },
    options: {},
  });
}