Better adding of plugins to Chart.js with Chartkick

[alex-benoit]

I am trying to register a plugin with Chart.js such as chartjs-plugin-annotation. I am on Rails 7 with Webpack, so I ran yarn add chartkick chart.js and import "chartkick/chart.js" .

I am trying to do

import "chartkick/chart.js"
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

But I get the error Chart is not defined.

After some digging, I figured how to get to the adapter with

import "chartkick/chart.js"
import annotationPlugin from "chartjs-plugin-annotation";
Chartkick.adapters[0].library.register(annotationPlugin);

But I'm not sure if this is the best way, or if it's worth adding a better way, or simply documenting this.

[itsgucci]

I am trying to do this with importmap and am stumped at how to do it.

I downloaded chartjs-plugin-annotation.min.js into my app/javascript folder

my importmap.rb includes

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
pin "annotations", to: "chartjs-plugin-annotation.min.js"

and my app/javascript/application.js has

import "chartkick"
import "Chart.bundle"
import "annotations"
Chartkick.adapters[0].library.register("annotations");

but I am getting Uncaught TypeError: Class extends value undefined is not a constructor or null

[itsyoshio]

I have the same problem @itsgucci

[saralhemnani]

Hey @itsyoshio did you find a solution?

[itsyoshio]

Hey @itsyoshio did you find a solution?

Sadly i did not

[ankane]

Hey @alex-benoit, thanks for the suggestion, and sorry everyone for the delay.

This will be addressed in the Chartkick 5 release. Current status: https://github.com/ankane/chartkick/issues/601#issuecomment-1376670689

[saralhemnani]

Thanks @ankane !

[ankane]

Hi all, Chartkick 5 is out and I'm still working on the docs, but the short version is:

For Importmaps, download the UMD version to vendor/javascript, pin it in config/importmap.rb, and use:

import "chartjs-plugin-annotation"

For esbuild, rollup.js, Webpack, or Webpacker, use:

import { Chart } from "chart.js"
import annotationPlugin from "chartjs-plugin-annotation"

Chart.register(annotationPlugin)

Then use the library option to apply it to charts:

<%= line_chart data, library: {plugins: {annotation: {annotations: {line1: {type: "line", yMin: 2, yMax: 2}}}}} %>

[swanson]

Hi all, Chartkick 5 is out and I'm still working on the docs, but the short version is:

For Importmaps, download the UMD version to vendor/javascript, pin it in config/importmap.rb, and use:

import "chartjs-plugin-annotation"

For esbuild, rollup.js, Webpack, or Webpacker, use:

import { Chart } from "chart.js"
import annotationPlugin from "chartjs-plugin-annotation"

Chart.register(annotationPlugin)

Then use the library option to apply it to charts:

<%= line_chart data, library: {plugins: {annotation: {annotations: {line1: {type: "line", yMin: 2, yMax: 2}}}}} %>

Hey! Very helpful to get the plugins working. One note: you still need the chartkick/chart.js for this to work. I made the mistake of removing that line and it was tricky to debug

import 'chartkick/chart.js'
import { Chart } from 'chart.js'
import annotationPlugin from 'chartjs-plugin-annotation'
Chart.register(annotationPlugin)

[alex-benoit]

❤️