Integration of Chart.JS in Stenciljs

Question

I am trying to incorporate Chart.JS (v. 4.4.0) in an Stenciljs (v. 2.13.0) application with stencils router, but unortunatelly, I can't get it to work when I change routes. Whenever I reload the page (Ctrl+R or F5) I can get the chart to load, but if I attempt to go on another route and then come back to the route I have the chart, it simply doesn't render/show. I don't receive any error in the console.

Here is the page's code:

import { Component, Host, h, JSX } from '@stencil/core';
import { Chart } from 'chart.js/auto';
@Component({
  tag: 'app-results',
  styleUrl: 'app-results.css',
  shadow: false,
})
export class AppResults {
  chartRef: HTMLCanvasElement
  chart: Chart
  data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];
  connectedCallback() {
    this.renderChart()
    console.log("Component connected");
  }
  componentDidRender() {
    this.renderChart()
    console.log('Component has been RENDERED');
  }
  disconnectedCallback() {
    this.chart?.destroy()
    console.log('Component has been disconnected');
  }
  renderChart() {
    if (this.chart) {
      this.chart.update()
    } else if (this.chartRef) {
      this.chart = new Chart(
        this.chartRef.getContext("2d"),
        {
          type: 'bar',
          data: {
            labels: this.data.map(row => row.year),
            datasets: [
              {
                label: 'Acquisitions by year',
                data: this.data.map(row => row.count)
              }]
          },
        }
      );
      this.chart.render()
    }
  }
  render(): JSX.Element {
    return (
      <Host>
        <canvas id="canvas" ref={(elem) => this.chartRef = elem} />
      </Host >
    )
  }
}

And this is my package.json

{
  "name": "agile",
  "private": true,
  "version": "0.0.1",
  "description": "Stencil App Starter",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@stencil/core": "2.13.0",
    "@types/bootstrap": "^5.2.6",
    "@types/jest": "^27.0.3",
    "@types/jquery": "^3.5.16",
    "@types/node": "^20.7.0",
    "jest": "^27.4.5",
    "jest-cli": "^27.4.5",
    "puppeteer": "^10.0.0",
    "rollup-plugin-dotenv": "^0.5.0"
  },
  "license": "MIT",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@stencil-community/router": "^1.0.2",
    "ag-grid-community": "^29.3.5",
    "bootstrap": "^5.3.1",
    "chart.js": "^4.4.0",
    "formiojs": "^4.17.1"
  }
}

I have tried creating a project from scratch and only including the bare minimum in order to get the chart and stencil (with the route component) to go, and the behavior is the same as in my application. Also, I tried playing around with some of stencil's lifecycle components to see if any of them helps, but unless I use a componentDidRender() method, I can't get anything to show in any of the scenarios mentioned before.

Since I don't receive any error or warning regarding the rendering of the chart I don't have anything to guide me in this regard.