Set Y-axis grid density in Rickshaw.js

javascript, rickshaw

Solution

You could set the number of ticks via `ticks` or the values to display via `tickValues` explicitly:

var yAxis = new Rickshaw.Graph.Axis.Y( {
  graph: graph,
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
  //ticks: 5, //static number of ticks, only works 
  tickValues: [50,100,150,200,250,300,350], // values to use/display
  element: document.getElementById('y_axis')
} );

You would use either `ticks` or `tickValues`, not both. If you use `tickValues` as above and your max y value is `180`, the y-scale would only show the values `[50,100,150,200]`, `250` and above would not be shown. If you add more data with a higher y-value, the scale would automatically re-scale and show the higher values as specified by you.

More information about `ticks` and `tickValues` can be found at the D3's SVG axes page.

Problem

I have a graph detailing wind speeds where I would like to have the grid on the Y axis have ticks every 5 (m/s). How do I set the density of the Y axis grid? ``` // triggered when data has been loaded via ajax $graph.on('graph.render', function(e, d) { var graph, y_axis; // Fixtures palette = new Rickshaw.Color.Palette(); graph = new Rickshaw.Graph( { element: $graph.find('.chart'); width: $graph.innerWidth() - 20, height: $graph.innerHeight() - 20, series: [ { key: 'min', name: 'Min Wind Speed', color: palette.color(), data: d[0].data } // ... ] }); x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph, timeUnit: { seconds: 600, formatter: function(d) { return d.toUTCString().match(/(\d+:\d+):/)[1]; } } }); y_axis = new Rickshaw.Graph.Axis.Y( { graph: graph, orientation: 'left', element: $graph.find('.y-axis') }); }); ```

Original source