Comments (9)
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}}}}} %>
from chartkick.
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
from chartkick.
I have the same problem @itsgucci
from chartkick.
Hey @itsyoshio did you find a solution?
from chartkick.
Hey @itsyoshio did you find a solution?
Sadly i did not
from chartkick.
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)
from chartkick.
Thanks @ankane !
from chartkick.
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)
from chartkick.
❤️
from chartkick.
Related Issues (20)
- Charts stuck at "Loading..." [example included] HOT 4
- CSP compliance breaks when used with Turbo Drive w/ and random nonce generator HOT 3
- Add support for chart.js 4.x HOT 3
- Add combo bar/line charts HOT 2
- Jruby Support HOT 1
- Support for Apex Charts HOT 1
- Add support for limiting the serie to a certain time frame HOT 1
- Support for polar (spiderweb) charts HOT 1
- Demo not rendering correctly in Safari HOT 2
- `createChart` is not fired after Turbo Frame renders the view HOT 8
- Comparisons in Two Date Ranges HOT 1
- Error importing Chartkick object HOT 2
- Provide ES module for JS with default exports HOT 1
- Rails 7 Setup Additional Step Needed HOT 4
- Canvas accessibility options like aria-label HOT 1
- preffix and suffix on column HOT 1
- X-axis is converted to integers even if datapoint contains alphanumeric characters HOT 1
- Some plugins not (fully) working with Chartkick with Importmaps HOT 2
- Conflicts with Action_text from rails and do not displaying in production(Heroku) HOT 1
- area_chart stoped do work with limit in ruby query HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartkick.