Trying to do some advanced x-axis label formatting with with highcharts;

<%= column_chart weekly_samples_charts_path, library: {
  xAxis: {
    labels: {
      enabled: true,
      formatter: function() { ... }
    }
  }
} %>

but this failes, I get undefined methodfunction' for #<#Class:0x007f8dd57e3258:0x007f8dd53cb8c8>` error.

Is this expected?

It's imperative that I use chartkick in my web app; however, there's one issue stopping me from using it: I'm not able to change the background color or use any library options within the 'library' hash when creating the chart. I've tested charting libraries Chart.js and Highcharts.js, and the results are the same. Whatever library options I pass, none of them work. Am I doing something wrong? Here's an example of my chart:

<%= line_chart User.group(:created_at).count, library: {backgroundColor: "#555"} %>

I'm using Chartkick 2.0. Is anyone else having this issue?

I have ChartKick referenced as outlined in the docs:

- content_for :head do
  = javascript_include_tag '//www.google.com/jsapi', 'chartkick'

(even referencing in head instead of at bottom of body!) and chartkick is not defined is being thrown. In the inspector, on line 355 of chartkick.js:

Uncaught TypeError: Cannot read property 'innerText' of undefined 

Any ideas?

Timeline: when Chart.js 3.0 is released - 4-0-edge branch

Plan

• [x] Make charts deferrable by default - deferrable branch + Chartkick.js deferrable branch
• [x] Better tooltips - no need to hit data point exactly
• [x] Use JavaScript's Date.parse for times (built-in support for ISO-8601)
• [x] Use local time for Highcharts - {time: {useUTC: false}} - https://github.com/ankane/react-chartkick/issues/47
• [x] Show empty (No data) message by default when data is empty
• [x] Show loading message when updateData is called (with URL or callback, make sure doesn't affect refresh option), with the ability to customize the loading message (https://github.com/ankane/chartkick.js/issues/119)
• [x] Add support for Chart.js 3
• [x] Remove type attribute from script tag ("The HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type." source)
• [x] Don't rerun JavaScript for Turbolinks preview - deferrable branch
• [x] Add Chartkick.destroyAll() method - destroyAll branch in Chartkick.js
• [x] Change gridlines for Chart.js bar charts
• [x] Require Ruby 2.6+
• [x] If a single series data format is used for column and bar charts (not [{name: "", data: ...}]) and the colors options is passed, use it for the color of each bar
• [x] Set nonce automatically when present
• [x] Add loading option
• [x] Automatically clean up charts on Turbolinks page change - https://github.com/ankane/chartkick/issues/536#issuecomment-720229441

Maybe (non-breaking, so can wait until after release)

• [ ] More chart types - bubble, radar, polar area, combo
• [ ] Add class and style options

Probably not

• [ ] Use data-chartkick-* attributes to avoid inline JavaScript (more CSP friendly, possibly add option if needed to render faster)

I followed the installations instructions at https://github.com/ankane/chartkick#installation with google charts and the chart won't load when you first start the server. Once you reload the page, the chart will load. I learned that I had to add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb after finding it on: http://stackoverflow.com/questions/19308820/chartkick-rails-4-undefined-method-pie-chart-for-class

Perhaps the installation instructions need to be updated?

Here's a request that allows the field ajaxOptions to be passed to the ajax request. Please let me know if you might consider it. I'm using this with with chartkick-remote and this gist https://gist.github.com/dontfidget/1ad9ab33971b64fe6fef, which allows me to limit the number of concurrent remote requests.

My controller then has this code:

  include Chartkick::Remote
  chartkick_remote ajaxOptions: {queue: true, queueMaxConcurrency: 2}

I've also taken your suggestion and made remote requests the default behavior for views on controllers that call chartkick_remote. Definitely looks better. Thanks.

Hi @ankane!

As usual, thank you so much for your OS contributions, they are huge.

I'm also having problems with Chartkick and turbolinks with defer. Everything else works just fine, but Chartkick raises that JS exception when the page is opened through clicking a link (it works, tough, when refreshing the page directly in the chartkick view).

In https://github.com/ankane/chartkick/issues/480#issuecomment-498919626 (#480) you mentioned that there's an edge branch with a solution, but that branch is currently 17 commits behind master.

Do you plan in releasing that fix in the master branch?

Thanks!

The example states:

Say Goodbye To Timeouts

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

<%= line_chart completed_tasks_charts_path %> And in your controller, pass the data as JSON.

class ChartsController < ApplicationController def completed_tasks render json: Task.group_by_day(:completed_at).count end end

Tried it. Doesn't work. JSON renders fine. The following code gets generated in my specific case:

new Chartkick.LineChart("chart-9", "/home/visits_by_day", {});

Excellent plugin!!! Having an issue using content_for...

My Layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= yield :charts_js %>
  </head>
  <body>
  <%= yield %>

  <%= javascript_include_tag 'application' %>
 </body>
</html>

Then my view

<%= line_chart ({"Football" => 10, "Basketball" => 5}), content_for: :charts_js %>

Gives me the error: Uncaught ReferenceError: Chartkick is not defined

How is content_for meant to be used?

Here's the data:

{"2013-05-20 00:00:00+00":0,"2013-05-21 00:00:00+00":0,"2013-05-22 00:00:00+00":116906}

What am I doing wrong?

I'm using chartkick gem for building Google Charts in my rails app. But I have a problem with displaying negative values in line chart. Negative value goes after the positive instead of before.

I have tried to google how to fix it, but didn't find any solution.

As a developer I want to be able to combine multiple chart types, such as line and bar charts So that I can create visualizations that show a series and an aggregation of a series in one graph

Given a developer wants to show bar and line charts at once When the developer configures their chartkick chart Then they specify combo_bar_line and within the data array they specify the two series to display

e.g.

<%= combo_bar_line [
    {
      name: "Series 1",
      data ...,
      dataset: { }
    },
    {
      name: "Series 2",
      data: ...,
      dataset: { }
    }
  ]
%>

Context

• Support for additional chart types is a top-roadmap item: https://github.com/ankane/chartkick/issues/489
• Chart.js supports bar/line charts as of 4.0.1: https://www.chartjs.org/docs/latest/samples/other-charts/combo-bar-line.html

Hi there,

Thank you for your time and work on this library.

First

I see there is existing documentation and are a handful of issues related to configuring CSP, but I think this is slightly different because it's related to the interplay between the default recommended nonce generation strategy, turbo and CSP. Apologies if I somehow managed to miss somewhere this is being discussed.

Describe the bug

When using turbo drive, it seems very likely folks using a CSP will run into violations due to the generated CSP nonce not matching the nonce used in the script tags on turbo visit.

To reproduce

I render a chart successfully on load. I can observe that the nonce generated alongside the script tag matches the csp nonce in the document head. All is well.

If I navigate away (a turbo drive visit) and back (another turbo drive visit), I observe that the nonce used in the script tags no-longer matches the nonce in the head.

Would you expect this to work? I suspect this is a limitation of the inline script tag approach under the circumstances described above.

If anyone else is running into this, you can, of course, disable turbo when clicking whatever thing ultimately lands you on a view displaying a chart, but this can be a kind of jarring user experience.

Another thing would be to use a session based nonce generation strategy like:

Rails.application.config.content_security_policy_nonce_generator = -> request { request.session.id.to_s }

I suspect many folks will run into this, since it seems the default recommended strategy at the moment is a unique per request approach:

Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }

So perhaps this is partially solved by some additional documentation (which I can help with).

Thanks again :)

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 appreciate the client-side ability to download an image file of the chart. The problem is that discoverability is lower than we would like because the user must hover the mouse over the chart area to even see that download image appear. So not so great on desktop and impossible to download on mobile. I noticed that the styles are hardcoded here:

https://github.com/ankane/chartkick/blob/4ad0c0bce42a5b0ea0c011d8d51dc8f5949d1ef8/vendor/assets/javascripts/chartkick.js#L1841

At the very least, it would be great to have an option to pass in a boolean to control whether or not the download link is always visible. Another idea is to pass in styles or classes for it.

Is your feature request related to a problem? Please describe. Consider this class:

class HourlyForecast < ApplicationRecord
  def self.chart_json
    ..
  end
end


p HourlyForecast.where.method(:chart_json).source_location
## Currently
# ["/---/chartkick-4.0.5/lib/chartkick/enumerable.rb", 4]
## Expected
# ["app/models/hourly_forecast, 2]

Something like that.