I have the following plot, which uses two axes: one for the differences and another for the accumulative differences.
I would like to force that both y axis match on 0, scaling the second faster later (Note that now we have a 0:200 match)
I´ve been checking the documentation, and it seems to include some variables for this purpose: onZero and onZeroAxisIndex. Nevertheless, I didn´t find any successful solution. Currently, my axis code looks as follows:
xAxis: {
type: "category",
data: props.dates,
},
yAxis: [
{
type: 'value',
name: 'Discprepancia',
position: 'left',
axisLabel: {
formatter: '{value} °C'
},
},
{
type: 'value',
name: 'Discprepancia acumulada',
position: 'right',
alignTicks: true,
axisLabel: {
formatter: '{value} °C'
}
}
]
Edit: I found a similar question in this thread
In a React/Javascript ecosystem, I solved it by playing with the min and max inside yAxis as follows:
yAxis: [
// Make both y axis ticks to match
{
type: 'value',
name: 'Desviación',
// Title is shown on bottom of axis
interval: 3,
position: 'left',
// alignTicks: true,
axisLabel: {
formatter: '{value}°C'
},
min: function (value) {
const absValue = max_abs(value.min, value.max)
const absValueRounded = (absValue * -1).toFixed(0)
return absValueRounded - (absValueRounded % 3) - 3;
},
max: function (value) {
const absValue = max_abs(value.min, value.max)
const absValueRounded = (absValue).toFixed(0)
return absValueRounded - (absValueRounded % 3) + 3;
},
},
{
type: 'value',
name: 'Desv. media',
position: 'right',
alignTicks: true,
axisLabel: {
formatter: '{value}°C'
},
min: function (value) {
const absValue = max_abs(value.min, value.max)
const absValueRounded = (absValue * -1).toFixed(0)
return absValueRounded - (absValueRounded % 3) - 3;
},
max: function (value) {
const absValue = max_abs(value.min, value.max)
const absValueRounded = (absValue).toFixed(0)
return absValueRounded - (absValueRounded % 3) + 3;
},
}
]
As you can see, I played with the value 3, which matches all the plot variations (for each meteorology station). Depending on your needs, You can change it or define it dynamically.
I guess that a similar solution is adaptable to other tech stack.