Display X and Y axis in Rickshaw Charts

Question

I have multiple data and its count.I want to display it using rickshaw bar chart. How can i display data and count in X and Y axis respectively. All i got is :

var graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    renderer: 'bar',
    series: [{
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 12 }, { x: 3, y: 81 }, { x: 4, y: 40 }, { x: 5, y: 49 }, { x: 6, y: 12 },{ x:7, y: 12 }],
        color: 'steelblue'
    }]
});

graph.render();

Which displays the bars without X and Y axis. how can we display X and Y axis in bar charts?

Answer 1

From the rickshaw page on ShutterStock:

var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});

xAxis.render();

var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph
});

yAxis.render();

Answer 2

For an in depth screencast on how to do a graph with x and y axes, including zooming and panning with Rickshaw (in AngularJS) head over to: http://tagtree.io/d3-with-rickshaw-and-angular