Using chart.js with importmaps in rail 7

I was able to solve this by fetching the library from the CDN rather than downloading it. To do this, I first unpinned the downloaded version:

bin/importmap unpin chart.js --download

and then I repinned it without downloading:

bin/importmap pin chart.js

And now it works!

As of August 2023, the setup for Chartkick (which uses chart.js) with Importmap is described in the Chartkick documentation, which worked for me.

Importmap
In config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

And in app/javascript/application.js, add:

import "chartkick"
import "Chart.bundle"

Manually downloading and pinning the packages from jsdelivr.com worked for me.

• https://www.jsdelivr.com/package/npm/chart.js (ESM)
• https://www.jsdelivr.com/package/npm/@kurkle/color (EMS)

Download with curl into vendor/javascript:

curl https://cdn.jsdelivr.net/npm/[email protected]/+esm -o vendor/javascript/chart.js.js
curl https://cdn.jsdelivr.net/npm/@kurkle/[email protected]/+esm -o vendor/javascript/kurklecolor.js

Manually change the import statement in the chart.js.js file to:

import {Color as t} from "kurklecolor"

Manually add pins to your config/importmap.rb:

pin 'chart.js' # https://cdn.jsdelivr.net/npm/[email protected]/+esm
pin 'kurklecolor' # https://cdn.jsdelivr.net/npm/@kurkle/[email protected]/+esm

Now you can just follow the official chart.js documentation. A working example below.

Add to your view:

<canvas id="acquisitions"></canvas>

Add to your Stimulus controller:

import { Controller } from '@hotwired/stimulus';
import { Chart, Colors, BarController, CategoryScale, LinearScale, BarElement, Legend } from 'chart.js'

export default class extends Controller {

  connect() {
    Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend);

    const 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 },
    ];

    new Chart(
      document.getElementById('acquisitions'),
      {
        type: 'bar',
        data: {
          labels: data.map(row => row.year),
          datasets: [
            {
              label: 'Acquisitions by year',
              data: data.map(row => row.count)
            }
          ]
        }
      }
    );
  }
}