How to set y-axis to fixed range in rickshaw?

Question

I have data where most of the values are in range 41-44, but occasionally there are peaks to 150-350, so y-axis is automatically scaled to 0-350 and chart is simply unreadable.

How to set fixed min and max for y-axis? I know that some values will be "above" chart, but that is not a problem.

Here is my chart

EDIT: alternatively I want to enable zooming in this graph which would be even better, any idea how to do this?

EDIT2: or maybe you can suggest other simple charting library with enabling/disabling lines, zooming & panning?

Answer 1

I have stumbled upon this question multiple times looking for a solution, Rickshaw now supports this itself by setting min and max in the graph constructor: https://github.com/shutterstock/rickshaw#rickshawgraph

Answer 2

I have used Giraffe - https://github.com/kenhub/giraffe that extends/built on top of rickshaw. With that you can set a "min" and "max" for a chart to set the scale. Since Giraffe uses rickshaw underneath, there should be something similar on rickshaw.

Answer 3

You could try using a scaled Y-axis (see the example in scaled.html). Make sure to set the scale in the series object as well as in the Y-axis:

var scale = d3.scale.linear().domain([41, 44]).nice();
graph = new Rickshaw.Graph({
    ...
    series: [{
        ...
        scale: scale
    }]
});
new Rickshaw.Graph.Axis.Y.Scaled({
    graph: graph,
    ...
    scale: scale
});

I haven't tried zooming with Rickshaw, but if you provide a way for the user to control the zoom factor, I think you can change the domain in the scale and call graph.update().