javascript - Chartkick not loading in Ruby on Rails 7 - Stack Overflow

I'm trying to render the basic line chart using Chartkick (with the default, Chart.js) in Ruby on Rails. I have followed the installation instructions here () and added:

1. gem "chartkick" to the gem file
2. pin "chartkick", to: "chartkick.js" and pin "Chart.bundle", to: "Chart.bundle.js" to importmap.rb
3. In my application layout, I've added <%= javascript_importmap_tags %>
4. In User/index.html, I have <%= line_chart User.group_by_day(:created_at).count %>. I have tried a more basic, <%= line_chart({"2021-01-01" => 2, "2021-01-02" => 3}) %>.

This render a page that says, "Loading...". An inspection of that page shows,

(function() {
    if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
    if (document.documentElement.hasAttribute("data-turbo-preview")) return;

    var createChart = function() { new Chartkick["LineChart"]("chart-2", [["2021-01-01",2],["2021-01-02",3]], {}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
})();

Can someone please let me determine what steps I'm missing to show the graph?

I'm trying to render the basic line chart using Chartkick (with the default, Chart.js) in Ruby on Rails. I have followed the installation instructions here (https://chartkick./#installation) and added:

1. gem "chartkick" to the gem file
2. pin "chartkick", to: "chartkick.js" and pin "Chart.bundle", to: "Chart.bundle.js" to importmap.rb
3. In my application layout, I've added <%= javascript_importmap_tags %>
4. In User/index.html, I have <%= line_chart User.group_by_day(:created_at).count %>. I have tried a more basic, <%= line_chart({"2021-01-01" => 2, "2021-01-02" => 3}) %>.

This render a page that says, "Loading...". An inspection of that page shows,

(function() {
    if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
    if (document.documentElement.hasAttribute("data-turbo-preview")) return;

    var createChart = function() { new Chartkick["LineChart"]("chart-2", [["2021-01-01",2],["2021-01-02",3]], {}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
})();

Can someone please let me determine what steps I'm missing to show the graph?

• javascript
• ruby-on-rails
• chartkick

Share Improve this question Follow edited May 12, 2023 at 12:30 Arctodus 5,83733 gold badges3333 silver badges4444 bronze badges asked Aug 23, 2022 at 0:35 Anne LalsinghAnne Lalsingh 16711 silver badge88 bronze badges 1

• 1 The solution in this post stackoverflow./questions/61110304/… worked for me but it doesn't make sense because it uses Google maps, whereas the installation instructions say it uses Chart.js as the default. – Anne Lalsingh Commented Aug 23, 2022 at 19:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

To solve this issue, you need to put <%= javascript_include_tag "//www.google./jsapi", "chartkick" %> in application.html.erb.

For me, the issue was being caused by "defer: true" in the application.js import:

<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

Removing defer solved it for me (AND making sure include_tag is in head, not right before /body). Charts began working again:

<%= javascript_include_tag "application", "data-turbo-track": "reload" %>

I can only assume that Chartkick doesn't like to load too late. I tried creating a new file next to application.js with only import "chartkick/chart.js" and its own include_tag without defer, but errors were thrown in the browser console.

Would love a way to use defer and have Chartkick work, but I couldn't find one. Let me know if anyone has found a solution.