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
How to set y-axis to fixed range in rickshaw?
-
25-06-2022 - |
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.
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?
La solution
Autres conseils
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()
.
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.