Add Gridlines using ChartKick in Rails-CodePudding

Using ChartKick with and chart.js I want to add horizontal gridlines. Data range is 100 to 200..

I'd like to have horizontal grid lines every 10 units.

<script src="https://cdnout.com/jquery/"></script>
<script src="https://cdnout.com/Chart.js/Chart.bundle.min.js"></script>
<script src="http://lib.arvancloud.com/ar/chartkick/2.3.0/chartkick.min.js"></script>

<%
  begin_tracking = Time.zone.parse('2021-03-24 18:33:00-07')
  current_date = Time.now 
%>

<%= line_chart DataTable.where(statdate: begin_tracking..current_date).pluck(:statdate, :data_ordinate), min: 100, max: 200, dataset: {borderWidth: 50} %>

I thought dataset: {borderWidth: 50} would do just that, but it's having no visible effect.

Docs quote:

To customize datasets in Chart.js, use:

<%= line_chart data, dataset: {borderWidth: 10} %>
You can pass this option to individual series as well.

Nothing about grid lines in Chart Kick and I wouldn't know how to translate the chart.js to Ruby.

CodePudding user response：

Full details of all of the options are at https://www.chartjs.org/docs/latest/axes/styling.html.

The general form is something like this:

<%= line_chart chart_path(@obj), 
  code: false,
  points: false, 
  min: 0, 
  max: 20, 
  colors: ["#0284C7", "#44403C"], 
  height: '105px', 
  width: '175px',
  library: { 
    scales: {           
      x: {
       display: false,
      },
      y: {
       display: true,
       font: {
          size: 6,
          weight: 100
      }
    }
  } %>

the display attributes indicate whether to show the grid or not.

CodePudding user response：

The problem was the CDN I found was out of date. With the CDN from jsDelivr the grid lines show up. The time scale formatting is different, but assume fixable. So the answer was right or on the right path. Thank you.