Some plugins not (fully) working with Chartkick with Importmaps

[bxkx]

I noticed the chartjs-plugin-zoom and chartjs-plugin-datalabels don't work correctly and not at all, respectively, with latest Rails and the Importmaps it ships with. Both plugins worked just fine with jsbundling/webpack I used previously. As per the guide I downloaded the .js file from their respective repos and added them to vendor/javascript and added the following to

importmap.rb

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

pin "chartjs-plugin-datalabels", to: "chartjs-plugin-datalabels.js"
pin "chartjs-plugin-zoom", to: "chartjs-plugin-zoom.js"

application.js

import "chartkick"
import "Chart.bundle"

import "chartjs-plugin-datalabels"
import "chartjs-plugin-zoom"

Chart in the .html.erb

<%= line_chart @data.stats.group_by_day(:created_at).maximum(:watching), library: { plugins: { zoom: { zoom: { drag: { enabled: true }, mode: "x" }, pan: { enabled: true, modifierKey: "ctrl" }, mode: "x" }, datalabels: { display: "auto", align: "top", color: "black" } } } %>

The zooming works. I can drag the mouse across the chart and it zooms into the area. Holding ctrl and dragging does not work. It does seem to register that ctrl is held because it prevents the zoom-drag function as it should. The datalabels just don't show up at all. There are no errors in the console.

Seems like bug/incompatibility. Or am I missing something glaring?

HTML generated by Chartkick

<div id="chart-8" style="height: 300px; width: 100%; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>
<script>
  (function() {
    if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
    if (document.documentElement.hasAttribute("data-turbo-preview")) return;

    var createChart = function() { new Chartkick["LineChart"]("chart-8", [["2024-02-12",63518],["2024-02-13",63790],["2024-02-14",64070],["2024-02-15",64379],["2024-02-16",64683],["2024-02-17",64956],["2024-02-18",65313],["2024-02-19",65520],["2024-02-20",65710],["2024-02-21",null],["2024-02-22",66143],["2024-02-23",66441]], {"library":{"plugins":{"zoom":{"zoom":{"drag":{"enabled":true},"mode":"x"},"pan":{"enabled":true,"modifierKey":"ctrl"},"mode":"x"},"datalabels":{"display":"auto","align":"top","color":"black"}}}}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
  })();
</script>

[ankane]

Hi @bxkx, I tested both plugins as part of #597 and didn't come across any issues.

Make sure you're using the UMD versions. Also, the datalabels plugin needs to be registered.

Chart.register(ChartDataLabels)

// and optionally hide by default
Chart.defaults.set("plugins.datalabels", {display: false})

I'm not sure about the issue with zoom functionality, but seems unlikely it's something with Chartkick (but happy to revisit if there's more evidence).

[bxkx]

Thank you, it's all working now! I tried to register it in various ways, I even had that exact line in the file, but only in conjunction with the "import from" stuff that made it not work. I didn't know nor tried I could just put that single line since I thought this was meant to be together with the other lines. For the panning to work I just needed to add hammer.js - I guess webpack/jsbundling added that automatically, so I wasn't aware. I feel a bit dumb, but I learned :D