htmlruby-on-railschart.jschartkick

Setting ticks of Chart.js in html.erb file


I'm using chartkick with chart.js in Ruby on Rails. I saw the documentation and some issues, but I can't find anything to solve my problem.

I'm setting my chart in html.erb file, like this:

<%=
    line_chart $hash_chart,
        options: {
            max: $value.max+5,
            min: $value.min-5,
            allowDecimals: false,
            colors: color_line,
            xtitle: "Title of x axis",
            ytitle: "Title of y axis",
            discrete: true,
            points: false,
            width: "500px",
            height: "500px",
            scales: {
                yAxes: [{
                    distribution: 'linear'
                }],
                xAxes: [{
                    distribution: 'linear',
                    type: 'category', (part of a configuration attempt)
                    categories: $time, (part of a configuration attempt)
                    ticks: {
                        stepSize: 10
                    }
                }]
            }
        }
%>

The settings until height param works, but scales settings doesn't. The answer of this issue is exactly what I make (according documentation of Chart.js), but didn't work: Force display of ticks on xAxes using chartkick gem and chart.js. I tried to put this setting inside library brace too.

Basically, I want to set the ticks in x Axis and show just some labels of my array of datas. Is it possible to format this (using this type of file)?


Solution

  • You are using the wrong old v2 syntax of chart.js, the scales in v3 for example have to be configured like this

    scales: {
      x:{
        ticks: {}
      },
      y: {
      // Y config
      }
    }
    

    EDIT: Since you are on V2 your syntax of declaring axis is correct, make sure you dont run the latest version of chartKick since it uses v3.

    distribution does not do anything unless your scale type is time. The stepSize only works for linear and time scales so you will need to change type: 'category' to type: 'linear' or if you are using time data to type: 'time' if you are using time data the stepsize has to be configured in the time sub part so you will need to change ticks to time