Herein, we describe how to force different axes to behave dependently of each other. jsGraph gives you the possibility to adapt the value of one axis (in this example, the right one) to another value on another axis (in this example, the left one). For this, the function to employ is Axis.adaptTo, which was introduced in v1.3.12 (and replaces the previous
adapt0To method which is covered and extended in the current
The method takes the following syntax:
With the following arguments:
axisshould be an Axis axis instance of the same type (vertical/horizontal) as the same axis. Note that jsGraph doesn’t check that so you could mathematically adapt a y axis to an x axis, but this wouldn’t make too much sense
myValueToAdaptTothis is the value on the current axis that should be aligned to the other value on
myReferenceValueOnAxisRefis the value on the
myValueToAdaptTowill be aligned to.
MinOrMaxPreferredwill define the behavior of the boundaries (see text later)
Let us start with a basic example
Ok so here there’s no adapt. The two axis behave independantly and adapt to their own serie.
Now, let’s force the right axis to align to the left axis. In this example, the value
0 of the right axis will align with
-3 on the left axis:
So here you can see that the minimum of the right axis has been preserved (roughly -1). This is because of the
MinOrMaxPreferred which is by default
min. If we set it to
max, a different behavior is observed:
Here is the rule when a boundary of the axis is forced:
- If no boundary is forced, then
MinOrMaxPreferreddefined which boundary behaves normally (adapts to the serie data).
- If only one boundary is forced, then
MinOrMaxPreferredhas no influence. Priority is given to forcing. So if
forceMinis used and
MinOrMaxPreferredis set to
max, the minimum of the axis will be chose to behave normally (according to the forced minimum) and the max will adapt.
- If two boundaries are forced,
MinOrMaxPreferreddefined which one will be preserved. The other forced boundary will not be effective.
In this example, both boundaries are forced (case 3):
While in the following example, case 2 applies (if one boundary only is forced, then
MinOrMaxPreferred has no influence)