Better adding of plugins to Chart.js with Chartkick
alex-benoit opened this issue · comments
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.
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
Hey @itsyoshio did you find a solution?
Hey @itsyoshio did you find a solution?
Sadly i did not
Hey @alex-benoit, thanks for the suggestion, and sorry everyone for the delay.
This will be addressed in the Chartkick 5 release. Current status: #601 (comment)
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}}}}} %>
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 inconfig/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)
❤️