X-Axis Date Formatting in Rickshaw

Question

I have added a datetime X-axis to my rickshaw graph:

var x_axis = new Rickshaw.Graph.Axis.Time({
   graph: graph,
   timeFixture: new Rickshaw.Fixtures.Time(),
});

However, it doesn't generally give me the format I want. Can I give it a specifier so the datetimes are always in a specified format (i.e. something like d3.time.format(specifier) )?

Something like in [this example](http://code.shutterstock.com/rickshaw/examples/x_axis.html)? — Lars Kotthoff, Feb 11 '14 at 19:42

score 2 · Answer 1 · answered Feb 11 '14 at 19:56

Based on Lars' linked example I have done the following:

var format = function(d) {
    d = new Date(d)
    return d3.time.format("%c")(d)
}
var x_axis = new Rickshaw.Graph.Axis.X({
        graph: graph,
        tickFormat: format,
});

Which seems to work, so now I just have to find a way to make the spacing come out okay....

score 1 · Answer 2 · answered Feb 21 '14 at 23:29

The formatter will only format the string, it will not determine the spacing. In order to control spacing and formatting, you could write your own 'Fixture', e.g. take a look at https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js for an example. The fixture provides two things: the spacing (e.g. year, month, day, hour) and the formatting of each. Create a similar fixture, space and format to your needs and set it on the x-axis:

var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  //timeFixture: new Rickshaw.Fixtures.Time()
  timeFixture: new MyOwnTimeFixture()
} );

score 1 · Answer 3 · answered Jan 04 '17 at 19:51

1

try this one it will work

var xAxis = new Rickshaw.Graph.Axis.Time({
        graph: graph,
        tickFormat: function(x){
            return new Date(x).toLocaleString();
        },
        ticks: 4
    });

answered Jan 04 '17 at 19:51

Deepak Sharma

458
9
21

X-Axis Date Formatting in Rickshaw

3 Answers3