Chart.js Plugins

Chartkick works with Chart.js global plugins. Here’s how to add the annotation plugin.

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

import "chartjs-plugin-annotation"

For Bun, esbuild, rollup.js, and Webpack, install the NPM package and use:

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

Chart.register(annotationPlugin)

For Sprockets, download the UMD version to vendor/assets/javascripts, change the extension from .cjs to .js, and use:

//= require chartjs-plugin-annotation

Then use the library option to apply it to charts:

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

Provide feedback