javascriptplotechartsapache-echarts

Force a 2 indexes ECharts plot to match 0 on both Y axis


I have the following plot, which uses two axes: one for the differences and another for the accumulative differences.

enter image description here

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


Solution

  • 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.

    enter image description here