javascriptruby-on-railsrubychart.jschartkick

Add Gridlines using ChartKick in Rails


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.


Solution

  • 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.