'xmin' and 'xmax' don't work as described in documentation

[pooriajr]

Describe the bug I was trying to use the xmin and xmax attributes as show in documentation:

This broke the chart, giving an invalid time error

If I remove those attributes, the chart renders fine.

I fiddled around with many different time formats to get it working but nothing worked. Not sure how to set the limits on X axis. Help would be greatly appreciated 😄

Backtrace:

RangeError: Invalid time value
errorCatcher — chartkick.js:2139
fetchDataSource — chartkick.js:2169
Chart — chartkick.js:2265
LineChart — chartkick.js:2413
createChart — a-new-contest:101
(anonymous function) — a-new-contest:103
Global Code — a-new-contest:107

To reproduce

<%= line_chart @event.visits.group_by_day(:created_at).count, xmin: "2021-01-01", xmax: "2022-01-01" %>

HTML generated by Chartkick

<div id="chart-1" 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;

    var createChart = function() { new Chartkick["LineChart"]("chart-1", [["2021-04-23",5]], {"xmin":"2021-01-01","xmax":"2022-01-01"}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
  })();
</script>

[pooriajr]

Oh, just had another issue with an invalid time object. This time from simply using

<%= line_chart @event.visits.group_by_hour(:created_at).count %>

which generated:

<div id="chart-1" 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;

    var createChart = function() { new Chartkick["LineChart"]("chart-1", [["2021-04-23T20:00:00.000Z",4],["2021-04-23T21:00:00.000Z",1]], {}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
  })();
</script>

So this probably isn't related to xmin/xman specifically. But I don't know what could be causing it...

[ankane]

Hey @pooriar, I'm having trouble reproducing the errors with the same code. A few questions:

1. Are you using Webpacker or Sprockets?
2. If Webpacker, what versions of the chartkick, chart.js, chartjs-adapter-date-fns, and date-fns NPM packages? If Sprockets, what version of the chartkick Ruby gem?
3. What browsers are you seeing the errors with?

[pooriajr]

Hi @ankane, thank you for responding!

1. I am using Webpacker

2. Versions:

   • chartkick 4.0.3
   • chart.js 3.1.1
   • charts-adapter-date-fns 2.0.0
   • date-fns 2.21.1

3. Browsers:

   • Safari 14.0.3
   • Firefox Dev Edition 89.0b3
   • Google Chrome 84

[ankane]

Thanks. Still not able to reproduce unfortunately. Can you try creating a fresh Rails app to see if it still appears?

[pooriajr]

Ok, so everything I said above was irrelevant.

Here's the problem, and it's extremely easy to replicate, I just did it in a fresh rails app:

1. Render the chart in a div with "display:none",
2. Remove "display:none" from the div

That gives me the error on my initial app and the fresh test app

I'm going to get around it by using height: 0 instead of display: none.

[mabras]

I have simillar issue. My charts are inside Bootstrap accordion. If I put it outside, it will just work.

[ankane]

Thank you both for reporting. Fixed in the latest release.

Ref: https://github.com/ankane/chartkick.js/commit/b1f3c337094f41393245d8104b59934625f77f8f