Force Display Of Ticks On Xaxes Using Chartkick Gem And Chart.js

I'm using Chartkick and Chart.js to visualize a data set of two lines, however, only the first tick on the x-axis displays I've tried passing options to the dataset as per the char

Solution 1:

From the docs:

autoSkip

If true, automatically calculates how many labels can be shown and hides labels accordingly.

maxTicksLimit

Maximum number of ticks and gridlines to show.

The autoSkip option controls whether some of the labels on the axes ticks are automatically skipped when the label texts would otherwise overlap. To control the number of ticks being displayed, what you're looking for is maxTicksLimit and related options. For your use case, you should probably set maxTicksLimit depending on the size of your data sets.

Also, these options can't be set on the datasets directly. Instead, you need to pass them through Chartkick to Chart.js by using the library option. So, something like this should achieve what you're trying to do:

<%= line_chart [
      { name:"Successes", data:@successful_requests },
      { name:"Errors", data:@error_requests }
    ],
    library: {
      scales: {
        xAxes: [{
          ticks: {
            maxTicksLimit:@successful_requests.size
          }
        }]
      }
    },
    legend:"bottom",
    messages: { empty:"Awaiting your first request!" }  
%>

Note that I'm assuming both your data sets are always of the same length.