Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

77
Views
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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!