trying to change Chartkick to Chart.js


I’m trying to migrate a chart from Chartkick to a Chart.js, as I plan to “merge” charts in the future and in Chartkick that function doesn’t exist. I’m having trouble understanding how data coming from the Rails controller is used in the “date” field when you write a function from a Charts.js with the same data as the Chartkick. Does anyone have this answer?

In chartkick, I have the following function:

<% = line_chart charts_loading_stock_days_path (start_date: @start_date, end_date: @end_date, granularity: @ granularity, supermarket: @supermarket, product: @product, family: @ family), download: true, colors: ["# FFD700"]% >

How would that look in Chart.js?

Thanks for the help and sorry if the question is very basic.


Chartkick can use Chart.js as the plotting engine. add //= require Chart.bundle to application.js before the //= require chartkick. Make sure that application.js is included before the helper function is called.

to inspect the code (dumped to js console) you can pass code: true to line_chart.


Hello, how are you? So I checked my application.js and it already included the Require chart.bundle. I didn’t know that the chartkick could work like chart.js. Thanks.

In Chartkick is it possible to merge different graphs into the same Layout? (As if it were superimposed). Because my idea of migrating the chart is precisely because in Chart.js this is possible. Thanks again :slight_smile:


do you mean more than one data series onto one plot/graph? you can modify/replace charts_loading_stock_days_path(…) to something that combines multiple data series.


I meant more than one type of chart in the same plot, for example a bar chart and a line chart together. You know?


I see now, i believe you can pass another option called library to line_chart whose value is a hash of options for the underlying charting library where you can set the chart type for each data series.

or …

since you’re using chart.js as the charting engine, in your data series set the dataset key to { type: ‘a_chart_type’ }.