Run Chart.js example with rails and stimulusJS

Question

I want to run the first example of Chart.js inside Ruby on Rails using StimulusJS. But for some reason it just renders an empty canvas (see [3]).

This is the html:

<div data-controller="linechart">
  <canvas data-linechart-target="myChart" width="400" height="400"></canvas>
</div>

and here is my stimulus controller:

import {Controller} from "@hotwired/stimulus"
import Chart from 'https://cdn.skypack.dev/chartjs';

export default class extends Controller {
    static targets = ['myChart'];

    canvasContext() {
        return this.myChartTarget.getContext('2d');
    }

    connect() {
        new Chart(this.canvasContext(), {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
}

What am i missing?

Answer 1

1. I think you are not importing the correct library. URL should be 'https://cdn.skypack.dev/chart.js'

2. Import and register:

   import { Chart, registerables } from 'https://cdn.skypack.dev/chart.js';
   Chart.register(...registerables);