CODEWITHSUNDEEP
javascriptruby-on-railsrubychart.jschartkick
Greg
Greg

Reputation: 2609

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.

Upvotes: 1

Views: 513

Answers (2)

Greg
Greg

Reputation: 2609

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.

Upvotes: 0

Drew Johnston
Drew Johnston

Reputation: 327

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.

Upvotes: 2

Related Questions